-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ButtonGroup] Add orientation prop (#18762)
- Loading branch information
1 parent
a8cd858
commit 6fb06f9
Showing
11 changed files
with
278 additions
and
228 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
|
|
||
| export default function GroupOrientation() { | ||
| return ( | ||
| <ButtonGroup | ||
| orientation="vertical" | ||
| color="primary" | ||
| aria-label="vertical outlined primary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
|
|
||
| export default function GroupOrientation() { | ||
| return ( | ||
| <ButtonGroup | ||
| orientation="vertical" | ||
| color="primary" | ||
| aria-label="vertical outlined primary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| root: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| '& > *': { | ||
| margin: theme.spacing(1), | ||
| }, | ||
| }, | ||
| })); | ||
|
|
||
| export default function GroupSizesColors() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <ButtonGroup size="small" aria-label="small outlined button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup color="secondary" aria-label="outlined secondary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup size="large" color="primary" aria-label="large outlined primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
| import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => | ||
| createStyles({ | ||
| root: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| '& > *': { | ||
| margin: theme.spacing(1), | ||
| }, | ||
| }, | ||
| }), | ||
| ); | ||
|
|
||
| export default function GroupSizesColors() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <ButtonGroup size="small" aria-label="small outlined button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup color="secondary" aria-label="outlined secondary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup size="large" color="primary" aria-label="large outlined primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,39 @@ | ||
| import React from 'react'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import ButtonGroup from '@material-ui/core/ButtonGroup'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| root: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| alignItems: 'center', | ||
| '& > *': { | ||
| margin: theme.spacing(1), | ||
| }, | ||
| }, | ||
| })); | ||
|
|
||
| export default function GroupedButtons() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={12} md={6}> | ||
| <Grid container spacing={1} direction="column" alignItems="center"> | ||
| <Grid item> | ||
| <ButtonGroup size="small" aria-label="small outlined button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup color="primary" aria-label="outlined primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| color="secondary" | ||
| size="large" | ||
| aria-label="large outlined secondary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12} md={6}> | ||
| <Grid container spacing={1} direction="column" alignItems="center"> | ||
| <Grid item> | ||
| <ButtonGroup variant="contained" size="small" aria-label="small contained button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="contained" | ||
| color="primary" | ||
| aria-label="full-width contained primary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="contained" | ||
| color="secondary" | ||
| size="large" | ||
| aria-label="large contained secondary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12} md={6}> | ||
| <Grid container spacing={1} direction="column" alignItems="center"> | ||
| <Grid item> | ||
| <ButtonGroup variant="text" size="small" aria-label="small contained button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="text" | ||
| color="primary" | ||
| aria-label="full-width contained primary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| <Grid item> | ||
| <ButtonGroup | ||
| variant="text" | ||
| color="secondary" | ||
| size="large" | ||
| aria-label="large contained secondary button group" | ||
| > | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid item xs={12} md={6}> | ||
| <ButtonGroup fullWidth aria-label="full width outlined button group"> | ||
| <Button>Full</Button> | ||
| <Button>width</Button> | ||
| <Button>Group</Button> | ||
| </ButtonGroup> | ||
| </Grid> | ||
| </Grid> | ||
| <div className={classes.root}> | ||
| <ButtonGroup color="primary" aria-label="outlined primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup variant="contained" color="primary" aria-label="contained primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| <ButtonGroup variant="text" color="primary" aria-label="text primary button group"> | ||
| <Button>One</Button> | ||
| <Button>Two</Button> | ||
| <Button>Three</Button> | ||
| </ButtonGroup> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.