/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/toggle-button/ToggleButtonSizes.js
51 строка
2 KB
Siriwat K
[docs] Migrate system props to `sx` prop (#42475)
05 июн 2024, 06:04
Не верифицирован
05 июн 2024, 06:04
6fe1242
Код
Авторство
О чём код?
import * as React from 'react'; import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; import Stack from '@mui/material/Stack'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; export default function ToggleButtonSizes() { const [alignment, setAlignment] = React.useState('left'); const handleChange = (event, newAlignment) => { setAlignment(newAlignment); }; const children = [ <ToggleButton value="left" key="left"> <FormatAlignLeftIcon /> </ToggleButton>, <ToggleButton value="center" key="center"> <FormatAlignCenterIcon /> </ToggleButton>, <ToggleButton value="right" key="right"> <FormatAlignRightIcon /> </ToggleButton>, <ToggleButton value="justify" key="justify"> <FormatAlignJustifyIcon /> </ToggleButton>, ]; const control = { value: alignment, onChange: handleChange, exclusive: true, }; return ( <Stack spacing={2} sx={{ alignItems: 'center' }}> <ToggleButtonGroup size="small" {...control} aria-label="Small sizes"> {children} </ToggleButtonGroup> <ToggleButtonGroup {...control} aria-label="Medium sizes"> {children} </ToggleButtonGroup> <ToggleButtonGroup size="large" {...control} aria-label="Large sizes"> {children} </ToggleButtonGroup> </Stack> ); }