CHIEFSOFT\ameye
116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|