forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ToggleButtonSizes.js
51 lines (46 loc) · 1.6 KB
/
ToggleButtonSizes.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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} 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>
);
}