Skip to content

Commit b69bd04

Browse files
limatgansoliviertassinari
limatgans
authored and
oliviertassinari
committed
[docs] Added TS Demos for component/toggle-button (#17822)
1 parent 57c3c40 commit b69bd04

File tree

3 files changed

+164
-0
lines changed

3 files changed

+164
-0
lines changed

‎docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import CheckIcon from '@material-ui/icons/Check';
3+
import ToggleButton from '@material-ui/lab/ToggleButton';
4+
5+
export default function StandaloneToggleButton() {
6+
const [selected, setSelected] = React.useState(false);
7+
8+
return (
9+
<ToggleButton
10+
value="check"
11+
selected={selected}
12+
onChange={() => {
13+
setSelected(!selected);
14+
}}
15+
>
16+
<CheckIcon />
17+
</ToggleButton>
18+
);
19+
}

‎docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
3+
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
4+
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
5+
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
6+
import Grid from '@material-ui/core/Grid';
7+
import ToggleButton from '@material-ui/lab/ToggleButton';
8+
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
9+
10+
export default function ToggleButtonSizes() {
11+
const [alignment, setAlignment] = React.useState('left');
12+
13+
const handleChange = (event: React.MouseEvent<HTMLElement>, newAlignment: string) => {
14+
setAlignment(newAlignment);
15+
};
16+
17+
const children = [
18+
<ToggleButton key={1} value="left">
19+
<FormatAlignLeftIcon />
20+
</ToggleButton>,
21+
<ToggleButton key={2} value="center">
22+
<FormatAlignCenterIcon />
23+
</ToggleButton>,
24+
<ToggleButton key={3} value="right">
25+
<FormatAlignRightIcon />
26+
</ToggleButton>,
27+
<ToggleButton key={4} value="justify" disabled>
28+
<FormatAlignJustifyIcon />
29+
</ToggleButton>,
30+
];
31+
32+
return (
33+
<Grid container spacing={2} direction="column" alignItems="center">
34+
<Grid item>
35+
<ToggleButtonGroup size="small" value={alignment} exclusive onChange={handleChange}>
36+
{children}
37+
</ToggleButtonGroup>
38+
</Grid>
39+
<Grid item>
40+
<ToggleButtonGroup size="medium" value={alignment} exclusive onChange={handleChange}>
41+
{children}
42+
</ToggleButtonGroup>
43+
</Grid>
44+
<Grid item>
45+
<ToggleButtonGroup size="large" value={alignment} exclusive onChange={handleChange}>
46+
{children}
47+
</ToggleButtonGroup>
48+
</Grid>
49+
</Grid>
50+
);
51+
}

‎docs/src/pages/components/toggle-button/ToggleButtons.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
4+
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
5+
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
6+
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
7+
import FormatBoldIcon from '@material-ui/icons/FormatBold';
8+
import FormatItalicIcon from '@material-ui/icons/FormatItalic';
9+
import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
10+
import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
11+
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
12+
import Typography from '@material-ui/core/Typography';
13+
import Grid from '@material-ui/core/Grid';
14+
import ToggleButton from '@material-ui/lab/ToggleButton';
15+
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
16+
17+
const useStyles = makeStyles(theme => ({
18+
toggleContainer: {
19+
margin: theme.spacing(2, 0),
20+
},
21+
}));
22+
23+
export default function ToggleButtons() {
24+
const [alignment, setAlignment] = React.useState('left');
25+
const [formats, setFormats] = React.useState(() => ['bold']);
26+
27+
const handleFormat = (event: React.MouseEvent<HTMLElement>, newFormats: string[]) => {
28+
setFormats(newFormats);
29+
};
30+
31+
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string) => {
32+
setAlignment(newAlignment);
33+
};
34+
35+
const classes = useStyles();
36+
37+
return (
38+
<Grid container spacing={2}>
39+
<Grid item sm={12} md={6}>
40+
<div className={classes.toggleContainer}>
41+
<ToggleButtonGroup
42+
value={alignment}
43+
exclusive
44+
onChange={handleAlignment}
45+
aria-label="text alignment"
46+
>
47+
<ToggleButton value="left" aria-label="left aligned">
48+
<FormatAlignLeftIcon />
49+
</ToggleButton>
50+
<ToggleButton value="center" aria-label="centered">
51+
<FormatAlignCenterIcon />
52+
</ToggleButton>
53+
<ToggleButton value="right" aria-label="right aligned">
54+
<FormatAlignRightIcon />
55+
</ToggleButton>
56+
<ToggleButton value="justify" aria-label="justified" disabled>
57+
<FormatAlignJustifyIcon />
58+
</ToggleButton>
59+
</ToggleButtonGroup>
60+
</div>
61+
<Typography gutterBottom>Exclusive Selection</Typography>
62+
<Typography>
63+
Text justification toggle buttons present options for left, right, center, full, and
64+
justified text with only one item available for selection at a time. Selecting one option
65+
deselects any other.
66+
</Typography>
67+
</Grid>
68+
<Grid item sm={12} md={6}>
69+
<div className={classes.toggleContainer}>
70+
<ToggleButtonGroup value={formats} onChange={handleFormat} arial-label="text formatting">
71+
<ToggleButton value="bold" aria-label="bold">
72+
<FormatBoldIcon />
73+
</ToggleButton>
74+
<ToggleButton value="italic" aria-label="italic">
75+
<FormatItalicIcon />
76+
</ToggleButton>
77+
<ToggleButton value="underlined" aria-label="underlined">
78+
<FormatUnderlinedIcon />
79+
</ToggleButton>
80+
<ToggleButton value="color" aria-label="color" disabled>
81+
<FormatColorFillIcon />
82+
<ArrowDropDownIcon />
83+
</ToggleButton>
84+
</ToggleButtonGroup>
85+
</div>
86+
<Typography gutterBottom>Multiple Selection</Typography>
87+
<Typography>
88+
Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be
89+
selected.
90+
</Typography>
91+
</Grid>
92+
</Grid>
93+
);
94+
}

0 commit comments

Comments
 (0)