-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Migrate Grid to emotion (#25332)
- Loading branch information
Showing
18 changed files
with
316 additions
and
542 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,41 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import { experimentalStyled as styled } from '@material-ui/core/styles'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| root: { | ||
| flexGrow: 1, | ||
| }, | ||
| paper: { | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| }, | ||
| const Item = styled(Paper)(({ theme }) => ({ | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| })); | ||
|
|
||
| export default function AutoGrid() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <Box sx={{ flexGrow: 1 }}> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| </Grid> | ||
| <br /> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <Paper className={classes.paper}>xs=6</Paper> | ||
| <Item>xs=6</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| </Grid> | ||
| </div> | ||
| </Box> | ||
| ); | ||
| } |
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,49 +1,41 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; | ||
| import { experimentalStyled as styled } from '@material-ui/core/styles'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
|
|
||
| const useStyles = makeStyles((theme: Theme) => | ||
| createStyles({ | ||
| root: { | ||
| flexGrow: 1, | ||
| }, | ||
| paper: { | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| }, | ||
| }), | ||
| ); | ||
| const Item = styled(Paper)(({ theme }) => ({ | ||
| padding: theme.spacing(2), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| })); | ||
|
|
||
| export default function AutoGrid() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <Box sx={{ flexGrow: 1 }}> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| </Grid> | ||
| <br /> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| <Grid item xs={6}> | ||
| <Paper className={classes.paper}>xs=6</Paper> | ||
| <Item>xs=6</Item> | ||
| </Grid> | ||
| <Grid item xs> | ||
| <Paper className={classes.paper}>xs</Paper> | ||
| <Item>xs</Item> | ||
| </Grid> | ||
| </Grid> | ||
| </div> | ||
| </Box> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -1,80 +1,69 @@ | ||
| import * as React from 'react'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import { experimentalStyled as styled } from '@material-ui/core/styles'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Paper from '@material-ui/core/Paper'; | ||
| import Divider from '@material-ui/core/Divider'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| container: { | ||
| display: 'grid', | ||
| gridTemplateColumns: 'repeat(12, 1fr)', | ||
| gap: theme.spacing(3), | ||
| }, | ||
| paper: { | ||
| padding: theme.spacing(1), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| whiteSpace: 'nowrap', | ||
| marginBottom: theme.spacing(1), | ||
| }, | ||
| divider: { | ||
| margin: theme.spacing(2, 0), | ||
| }, | ||
| const Item = styled(Paper)(({ theme }) => ({ | ||
| padding: theme.spacing(1), | ||
| textAlign: 'center', | ||
| color: theme.palette.text.secondary, | ||
| whiteSpace: 'nowrap', | ||
| marginBottom: theme.spacing(1), | ||
| })); | ||
|
|
||
| export default function CSSGrid() { | ||
| const classes = useStyles(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Typography variant="subtitle1" gutterBottom component="div"> | ||
| Material-UI Grid: | ||
| </Typography> | ||
| <Grid container spacing={3}> | ||
| <Grid item xs={3}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| <Item>xs=3</Item> | ||
| </Grid> | ||
| <Grid item xs={3}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| <Item>xs=3</Item> | ||
| </Grid> | ||
| <Grid item xs={3}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| <Item>xs=3</Item> | ||
| </Grid> | ||
| <Grid item xs={3}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| <Item>xs=3</Item> | ||
| </Grid> | ||
| <Grid item xs={8}> | ||
| <Paper className={classes.paper}>xs=8</Paper> | ||
| <Item>xs=8</Item> | ||
| </Grid> | ||
| <Grid item xs={4}> | ||
| <Paper className={classes.paper}>xs=4</Paper> | ||
| <Item>xs=4</Item> | ||
| </Grid> | ||
| </Grid> | ||
| <Divider className={classes.divider} /> | ||
| <Divider sx={{ my: 2 }} /> | ||
| <Typography variant="subtitle1" gutterBottom component="div"> | ||
| CSS Grid Layout: | ||
| </Typography> | ||
| <div className={classes.container}> | ||
| <div style={{ gridColumnEnd: 'span 3' }}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| </div> | ||
| <div style={{ gridColumnEnd: 'span 3' }}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| </div> | ||
| <div style={{ gridColumnEnd: 'span 3' }}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| </div> | ||
| <div style={{ gridColumnEnd: 'span 3' }}> | ||
| <Paper className={classes.paper}>xs=3</Paper> | ||
| </div> | ||
| <div style={{ gridColumnEnd: 'span 8' }}> | ||
| <Paper className={classes.paper}>xs=8</Paper> | ||
| </div> | ||
| <div style={{ gridColumnEnd: 'span 4' }}> | ||
| <Paper className={classes.paper}>xs=4</Paper> | ||
| </div> | ||
| </div> | ||
| <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 3 }}> | ||
| <Box sx={{ gridColumnEnd: 'span 3' }}> | ||
| <Item>xs=3</Item> | ||
| </Box> | ||
| <Box sx={{ gridColumnEnd: 'span 3' }}> | ||
| <Item>xs=3</Item> | ||
| </Box> | ||
| <Box sx={{ gridColumnEnd: 'span 3' }}> | ||
| <Item>xs=3</Item> | ||
| </Box> | ||
| <Box sx={{ gridColumnEnd: 'span 3' }}> | ||
| <Item>xs=3</Item> | ||
| </Box> | ||
| <Box sx={{ gridColumnEnd: 'span 8' }}> | ||
| <Item>xs=8</Item> | ||
| </Box> | ||
| <Box sx={{ gridColumnEnd: 'span 4' }}> | ||
| <Item>xs=4</Item> | ||
| </Box> | ||
| </Box> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.