/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/badges/BadgeVisibility.js
41 строка
1 KB
Albert Yu
[badge] Add `aria-hidden` to badge content and polish docs demos (#48471)
03 июн 2026, 15:57
Не верифицирован
03 июн 2026, 15:57
49aade9
Код
Авторство
О чём код?
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Badge from '@mui/material/Badge'; import IconButton from '@mui/material/IconButton'; import Switch from '@mui/material/Switch'; import FormControlLabel from '@mui/material/FormControlLabel'; import MailIcon from '@mui/icons-material/Mail'; const unreadMessagesCount = 4; export default function BadgeVisibility() { const [invisible, setInvisible] = React.useState(false); const handleBadgeVisibility = () => { setInvisible((previousInvisible) => !previousInvisible); }; return ( <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}> <IconButton aria-label={ invisible ? 'open inbox' : `open inbox, ${unreadMessagesCount} unread messages` } > <Badge color="secondary" badgeContent={unreadMessagesCount} invisible={invisible} > <MailIcon /> </Badge> </IconButton> <FormControlLabel control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />} label="Show unread count" /> </Stack> ); }