|
1 | 1 | import * as React from 'react';
|
2 |
| -import ToggleButton from '@mui/material/ToggleButton'; |
3 |
| -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
| 2 | +import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; |
| 3 | +import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; |
| 4 | +import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; |
| 5 | +import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; |
| 6 | +import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton'; |
| 7 | +import ToggleButtonGroup, { |
| 8 | + toggleButtonGroupClasses, |
| 9 | +} from '@mui/material/ToggleButtonGroup'; |
| 10 | +import { styled } from '@mui/material/styles'; |
| 11 | + |
| 12 | +const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ |
| 13 | + gap: '2rem', |
| 14 | + [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]: |
| 15 | + { |
| 16 | + borderTopRightRadius: theme.vars.shape.borderRadius, |
| 17 | + borderBottomRightRadius: theme.vars.shape.borderRadius, |
| 18 | + }, |
| 19 | + [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]: |
| 20 | + { |
| 21 | + borderTopLeftRadius: theme.vars.shape.borderRadius, |
| 22 | + borderBottomLeftRadius: theme.vars.shape.borderRadius, |
| 23 | + borderLeft: `1px solid ${theme.vars.palette.divider}`, |
| 24 | + }, |
| 25 | + [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: |
| 26 | + { |
| 27 | + borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`, |
| 28 | + }, |
| 29 | +})); |
4 | 30 |
|
5 | 31 | export default function HorizontalSpacingToggleButton() {
|
6 |
| - const [alignment, setAlignment] = React.useState('web'); |
| 32 | + const [alignment, setAlignment] = React.useState<string | null>('left'); |
7 | 33 |
|
8 |
| - const handleChange = ( |
| 34 | + const handleAlignment = ( |
9 | 35 | event: React.MouseEvent<HTMLElement>,
|
10 |
| - newAlignment: string, |
| 36 | + newAlignment: string | null, |
11 | 37 | ) => {
|
12 | 38 | setAlignment(newAlignment);
|
13 | 39 | };
|
14 | 40 |
|
15 | 41 | return (
|
16 |
| - <ToggleButtonGroup |
17 |
| - color="primary" |
| 42 | + <StyledToggleButtonGroup |
18 | 43 | value={alignment}
|
19 | 44 | exclusive
|
20 |
| - onChange={handleChange} |
21 |
| - aria-label="Platform" |
| 45 | + onChange={handleAlignment} |
| 46 | + aria-label="text alignment" |
22 | 47 | >
|
23 |
| - <ToggleButton value="web">Web</ToggleButton> |
24 |
| - <ToggleButton value="android">Android</ToggleButton> |
25 |
| - <ToggleButton value="ios">iOS</ToggleButton> |
26 |
| - </ToggleButtonGroup> |
| 48 | + <ToggleButton value="left" aria-label="left aligned"> |
| 49 | + <FormatAlignLeftIcon /> |
| 50 | + </ToggleButton> |
| 51 | + <ToggleButton value="center" aria-label="centered"> |
| 52 | + <FormatAlignCenterIcon /> |
| 53 | + </ToggleButton> |
| 54 | + <ToggleButton value="right" aria-label="right aligned"> |
| 55 | + <FormatAlignRightIcon /> |
| 56 | + </ToggleButton> |
| 57 | + <ToggleButton value="justify" aria-label="justified" disabled> |
| 58 | + <FormatAlignJustifyIcon /> |
| 59 | + </ToggleButton> |
| 60 | + </StyledToggleButtonGroup> |
27 | 61 | );
|
28 | 62 | }
|
29 |
| - |
30 |
| -// import * as React from 'react'; |
31 |
| -// import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; |
32 |
| -// import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; |
33 |
| -// import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; |
34 |
| -// import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; |
35 |
| -// import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton'; |
36 |
| -// import ToggleButtonGroup, { |
37 |
| -// toggleButtonGroupClasses, |
38 |
| -// } from '@mui/material/ToggleButtonGroup'; |
39 |
| -// import { styled } from '@mui/material/styles'; |
40 |
| - |
41 |
| -// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ |
42 |
| -// gap: '2rem', |
43 |
| -// [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]: |
44 |
| -// { |
45 |
| -// borderTopRightRadius: theme.vars.shape.borderRadius, |
46 |
| -// borderBottomRightRadius: theme.vars.shape.borderRadius, |
47 |
| -// }, |
48 |
| -// [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]: |
49 |
| -// { |
50 |
| -// borderTopLeftRadius: theme.vars.shape.borderRadius, |
51 |
| -// borderBottomLeftRadius: theme.vars.shape.borderRadius, |
52 |
| -// borderLeft: `1px solid ${theme.vars.palette.divider}`, |
53 |
| -// }, |
54 |
| -// [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: |
55 |
| -// { |
56 |
| -// borderLeft: `1px solid ${theme.vars.palette.action.disabledBackground}`, |
57 |
| -// }, |
58 |
| -// })); |
59 |
| - |
60 |
| -// export default function HorizontalSpacingToggleButton() { |
61 |
| -// const [alignment, setAlignment] = React.useState<string | null>('left'); |
62 |
| - |
63 |
| -// const handleAlignment = ( |
64 |
| -// event: React.MouseEvent<HTMLElement>, |
65 |
| -// newAlignment: string | null, |
66 |
| -// ) => { |
67 |
| -// setAlignment(newAlignment); |
68 |
| -// }; |
69 |
| - |
70 |
| -// return ( |
71 |
| -// <div> |
72 |
| -// <StyledToggleButtonGroup |
73 |
| -// value={alignment} |
74 |
| -// exclusive |
75 |
| -// onChange={handleAlignment} |
76 |
| -// aria-label="text alignment" |
77 |
| -// > |
78 |
| -// <ToggleButton value="left" aria-label="left aligned"> |
79 |
| -// <FormatAlignLeftIcon /> |
80 |
| -// </ToggleButton> |
81 |
| -// <ToggleButton value="center" aria-label="centered"> |
82 |
| -// <FormatAlignCenterIcon /> |
83 |
| -// </ToggleButton> |
84 |
| -// <ToggleButton value="right" aria-label="right aligned"> |
85 |
| -// <FormatAlignRightIcon /> |
86 |
| -// </ToggleButton> |
87 |
| -// <ToggleButton value="justify" aria-label="justified" disabled> |
88 |
| -// <FormatAlignJustifyIcon /> |
89 |
| -// </ToggleButton> |
90 |
| -// </StyledToggleButtonGroup> |
91 |
| -// </div> |
92 |
| -// ); |
93 |
| -// } |
0 commit comments