first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,61 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
export default function AutoWidth() {
|
||||
|
||||
const [age, setAge] = React.useState('');
|
||||
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Auto Width
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<FormControl sx={{ minWidth: 80 }}>
|
||||
<InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-autowidth-label"
|
||||
id="demo-simple-select-autowidth"
|
||||
value={age}
|
||||
onChange={handleChange}
|
||||
autoWidth
|
||||
label="Age"
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={10}>Twenty</MenuItem>
|
||||
<MenuItem value={21}>Twenty one</MenuItem>
|
||||
<MenuItem value={22}>Twenty one and a half</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Box from '@mui/material/Box';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
export default function Basic() {
|
||||
|
||||
const [age, setAge] = React.useState('');
|
||||
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Basic
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ minWidth: 120 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="demo-simple-select-label">Age</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={age}
|
||||
label="Age"
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={10}>Ten</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
import NativeSelect from '@mui/material/NativeSelect';
|
||||
import InputBase from '@mui/material/InputBase';
|
||||
|
||||
const BootstrapInput = styled(InputBase)(({ theme }) => ({
|
||||
'label + &': {
|
||||
marginTop: theme.spacing(3),
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
borderRadius: 4,
|
||||
position: 'relative',
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
border: '1px solid #ced4da',
|
||||
fontSize: 16,
|
||||
padding: '10px 26px 10px 12px',
|
||||
transition: theme.transitions.create(['border-color', 'box-shadow']),
|
||||
// Use the system font instead of the default Roboto font.
|
||||
fontFamily: [
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
].join(','),
|
||||
'&:focus': {
|
||||
borderRadius: 4,
|
||||
borderColor: '#80bdff',
|
||||
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Customization() {
|
||||
|
||||
const [age, setAge] = React.useState('');
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Customization
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<FormControl variant="standard" className="mr-1">
|
||||
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
|
||||
<BootstrapInput id="demo-customized-textbox" />
|
||||
</FormControl>
|
||||
|
||||
<FormControl className="mr-1" variant="standard">
|
||||
<InputLabel id="demo-customized-select-label">Age</InputLabel>
|
||||
<Select
|
||||
labelId="demo-customized-select-label"
|
||||
id="demo-customized-select"
|
||||
value={age}
|
||||
onChange={handleChange}
|
||||
input={<BootstrapInput />}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={10}>Ten</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl className="mr-1" variant="standard">
|
||||
<InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
|
||||
<NativeSelect
|
||||
id="demo-customized-select-native"
|
||||
value={age}
|
||||
onChange={handleChange}
|
||||
input={<BootstrapInput />}
|
||||
>
|
||||
<option aria-label="None" value="" />
|
||||
<option value={10}>Ten</option>
|
||||
<option value={20}>Twenty</option>
|
||||
<option value={30}>Thirty</option>
|
||||
</NativeSelect>
|
||||
</FormControl>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Select from '@mui/material/Select';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
|
||||
export default function MultipleSelectCheckmarks() {
|
||||
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === 'string' ? value.split(',') : value,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
Multiple Select Checkmarks
|
||||
</Typography>
|
||||
|
||||
<>
|
||||
<FormControl sx={{ width: '100%' }}>
|
||||
<InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-checkbox-label"
|
||||
id="demo-multiple-checkbox"
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput label="Tag" />}
|
||||
renderValue={(selected) => selected.join(', ')}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem key={name} value={name}>
|
||||
<Checkbox checked={personName.indexOf(name) > -1} />
|
||||
<ListItemText primary={name} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
import Chip from '@mui/material/Chip';
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
|
||||
function getStyles(name, personName, theme) {
|
||||
return {
|
||||
fontWeight:
|
||||
personName.indexOf(name) === -1
|
||||
? theme.typography.fontWeightRegular
|
||||
: theme.typography.fontWeightMedium,
|
||||
};
|
||||
}
|
||||
|
||||
export default function MultipleSelectChip() {
|
||||
const theme = useTheme();
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === 'string' ? value.split(',') : value,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Multiple Select Chip
|
||||
</Typography>
|
||||
|
||||
<>
|
||||
<FormControl sx={{ width: '100%' }}>
|
||||
<InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-chip-label"
|
||||
id="demo-multiple-chip"
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
value={name}
|
||||
style={getStyles(name, personName, theme)}
|
||||
>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
|
||||
function getStyles(name, personName, theme) {
|
||||
return {
|
||||
fontWeight:
|
||||
personName.indexOf(name) === -1
|
||||
? theme.typography.fontWeightRegular
|
||||
: theme.typography.fontWeightMedium,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
export default function MultipleSelectDefault() {
|
||||
|
||||
const theme = useTheme();
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === 'string' ? value.split(',') : value,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
mb: '10px'
|
||||
}}
|
||||
>
|
||||
Multiple Select Default
|
||||
</Typography>
|
||||
|
||||
<div>
|
||||
<FormControl sx={{ m: 1, width: 300 }}>
|
||||
<InputLabel id="demo-multiple-name-label">Name</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-name-label"
|
||||
id="demo-multiple-name"
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput label="Name" />}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
value={name}
|
||||
style={getStyles(name, personName, theme)}
|
||||
>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user