Skip to content

Commit 2c2ede9

Browse files
sai6855sai chandZeeshanTamboli
authored
[docs][ToggleButtonGroup] Add spacing demo (#46058)
Co-authored-by: sai chand <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
1 parent 4cfd2f7 commit 2c2ede9

File tree

5 files changed

+256
-0
lines changed

5 files changed

+256
-0
lines changed

‎docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react';
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 || theme).shape.borderRadius,
17+
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
22+
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
23+
borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
28+
},
29+
}));
30+
31+
export default function HorizontalSpacingToggleButton() {
32+
const [alignment, setAlignment] = React.useState('left');
33+
34+
const handleAlignment = (event, newAlignment) => {
35+
setAlignment(newAlignment);
36+
};
37+
38+
return (
39+
<StyledToggleButtonGroup
40+
value={alignment}
41+
exclusive
42+
onChange={handleAlignment}
43+
aria-label="text alignment"
44+
>
45+
<ToggleButton value="left" aria-label="left aligned">
46+
<FormatAlignLeftIcon />
47+
</ToggleButton>
48+
<ToggleButton value="center" aria-label="centered">
49+
<FormatAlignCenterIcon />
50+
</ToggleButton>
51+
<ToggleButton value="right" aria-label="right aligned">
52+
<FormatAlignRightIcon />
53+
</ToggleButton>
54+
<ToggleButton value="justify" aria-label="justified" disabled>
55+
<FormatAlignJustifyIcon />
56+
</ToggleButton>
57+
</StyledToggleButtonGroup>
58+
);
59+
}

‎docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
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 || theme).shape.borderRadius,
17+
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
22+
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
23+
borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
28+
},
29+
}));
30+
31+
export default function HorizontalSpacingToggleButton() {
32+
const [alignment, setAlignment] = React.useState<string | null>('left');
33+
34+
const handleAlignment = (
35+
event: React.MouseEvent<HTMLElement>,
36+
newAlignment: string | null,
37+
) => {
38+
setAlignment(newAlignment);
39+
};
40+
41+
return (
42+
<StyledToggleButtonGroup
43+
value={alignment}
44+
exclusive
45+
onChange={handleAlignment}
46+
aria-label="text alignment"
47+
>
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>
61+
);
62+
}

‎docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react';
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+
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
17+
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
22+
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
23+
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
28+
},
29+
}));
30+
31+
export default function VerticalSpacingToggleButton() {
32+
const [alignment, setAlignment] = React.useState('left');
33+
34+
const handleAlignment = (event, newAlignment) => {
35+
setAlignment(newAlignment);
36+
};
37+
38+
return (
39+
<StyledToggleButtonGroup
40+
value={alignment}
41+
exclusive
42+
onChange={handleAlignment}
43+
aria-label="text alignment"
44+
orientation="vertical"
45+
>
46+
<ToggleButton value="left" aria-label="left aligned">
47+
<FormatAlignLeftIcon />
48+
</ToggleButton>
49+
<ToggleButton value="center" aria-label="centered">
50+
<FormatAlignCenterIcon />
51+
</ToggleButton>
52+
<ToggleButton value="right" aria-label="right aligned">
53+
<FormatAlignRightIcon />
54+
</ToggleButton>
55+
<ToggleButton value="justify" aria-label="justified" disabled>
56+
<FormatAlignJustifyIcon />
57+
</ToggleButton>
58+
</StyledToggleButtonGroup>
59+
);
60+
}

‎docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react';
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+
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
17+
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
18+
},
19+
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
20+
{
21+
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
22+
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
23+
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
24+
},
25+
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
26+
{
27+
borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
28+
},
29+
}));
30+
31+
export default function VerticalSpacingToggleButton() {
32+
const [alignment, setAlignment] = React.useState<string | null>('left');
33+
34+
const handleAlignment = (
35+
event: React.MouseEvent<HTMLElement>,
36+
newAlignment: string | null,
37+
) => {
38+
setAlignment(newAlignment);
39+
};
40+
41+
return (
42+
<StyledToggleButtonGroup
43+
value={alignment}
44+
exclusive
45+
onChange={handleAlignment}
46+
aria-label="text alignment"
47+
orientation="vertical"
48+
>
49+
<ToggleButton value="left" aria-label="left aligned">
50+
<FormatAlignLeftIcon />
51+
</ToggleButton>
52+
<ToggleButton value="center" aria-label="centered">
53+
<FormatAlignCenterIcon />
54+
</ToggleButton>
55+
<ToggleButton value="right" aria-label="right aligned">
56+
<FormatAlignRightIcon />
57+
</ToggleButton>
58+
<ToggleButton value="justify" aria-label="justified" disabled>
59+
<FormatAlignJustifyIcon />
60+
</ToggleButton>
61+
</StyledToggleButtonGroup>
62+
);
63+
}

‎docs/data/material/components/toggle-button/toggle-button.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,18 @@ You can learn more about this in the [overrides documentation page](/material-ui
8080

8181
{{"demo": "CustomizedDividers.js", "bg": true}}
8282

83+
### Spacing
84+
85+
The demos below show how to adjust spacing between toggle buttons in horizontal and vertical orientations.
86+
87+
#### Horizontal Spacing
88+
89+
{{"demo": "HorizontalSpacingToggleButton.js"}}
90+
91+
#### Vertical Spacing
92+
93+
{{"demo": "VerticalSpacingToggleButton.js"}}
94+
8395
## Accessibility
8496

8597
### ARIA

0 commit comments

Comments
 (0)