70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Badge from '@mui/material/Badge';
|
||
|
|
import ButtonGroup from '@mui/material/ButtonGroup';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import AddIcon from '@mui/icons-material/Add';
|
||
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
||
|
|
import MailIcon from '@mui/icons-material/Mail';
|
||
|
|
import Switch from '@mui/material/Switch';
|
||
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
||
|
|
|
||
|
|
export default function BadgeVisibility() {
|
||
|
|
const [count, setCount] = React.useState(1);
|
||
|
|
const [invisible, setInvisible] = React.useState(false);
|
||
|
|
|
||
|
|
const handleBadgeVisibility = () => {
|
||
|
|
setInvisible(!invisible);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
color: 'action.active',
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
'& > *': {
|
||
|
|
marginBottom: 2,
|
||
|
|
},
|
||
|
|
'& .MuiBadge-root': {
|
||
|
|
marginRight: 4,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Badge color="secondary" badgeContent={count}>
|
||
|
|
<MailIcon />
|
||
|
|
</Badge>
|
||
|
|
<ButtonGroup>
|
||
|
|
<Button
|
||
|
|
aria-label="reduce"
|
||
|
|
onClick={() => {
|
||
|
|
setCount(Math.max(count - 1, 0));
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<RemoveIcon fontSize="small" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
aria-label="increase"
|
||
|
|
onClick={() => {
|
||
|
|
setCount(count + 1);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<AddIcon fontSize="small" />
|
||
|
|
</Button>
|
||
|
|
</ButtonGroup>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<Badge color="secondary" variant="dot" invisible={invisible}>
|
||
|
|
<MailIcon />
|
||
|
|
</Badge>
|
||
|
|
<FormControlLabel
|
||
|
|
sx={{ color: 'text.primary' }}
|
||
|
|
control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
|
||
|
|
label="Show Badge"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|