Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add Grid version 2 docs #33554

Merged
merged 17 commits into from
Aug 2, 2022
Merged

[docs] Add Grid version 2 docs #33554

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e182a73
add grid2 docs and demos
siriwatknp Jul 17, 2022
958a4be
update demo
siriwatknp Jul 17, 2022
2fd1a35
add migration guide
siriwatknp Jul 18, 2022
a10d367
add negative margin
siriwatknp Jul 18, 2022
06b9674
add CenteredElementGrid demo
siriwatknp Jul 18, 2022
918eae8
add Grid bordered customization
siriwatknp Jul 18, 2022
ed7843d
run docs scripts
siriwatknp Jul 18, 2022
df8e89d
run docs:i18n
siriwatknp Jul 18, 2022
144644c
fix types
siriwatknp Jul 18, 2022
3d93904
update content
siriwatknp Jul 18, 2022
4ee0972
Apply suggestions from code review
siriwatknp Jul 28, 2022
40a9d67
Apply suggestions from code review
siriwatknp Jul 29, 2022
bc62313
Update docs/data/material/components/grid2/grid2.md
siriwatknp Aug 1, 2022
33ccc12
Merge branch 'master' of https://github.com/mui/material-ui into mui/…
siriwatknp Aug 1, 2022
adf6e98
remove warning
siriwatknp Aug 1, 2022
769ee84
run prettier
siriwatknp Aug 1, 2022
4374b16
update content
siriwatknp Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions docs/data/material/components/grid2/AutoGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid xs>
<Item>xs</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
</Box>
);
}
31 changes: 31 additions & 0 deletions docs/data/material/components/grid2/AutoGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid xs>
<Item>xs</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
</Box>
);
}
11 changes: 11 additions & 0 deletions docs/data/material/components/grid2/AutoGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Grid container spacing={3}>
<Grid xs>
<Item>xs</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
34 changes: 34 additions & 0 deletions docs/data/material/components/grid2/BasicGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
34 changes: 34 additions & 0 deletions docs/data/material/components/grid2/BasicGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
14 changes: 14 additions & 0 deletions docs/data/material/components/grid2/BasicGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
22 changes: 22 additions & 0 deletions docs/data/material/components/grid2/CenteredElementGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';

export default function CenteredElementGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} minHeight={160}>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/1.jpg" />
</Grid>
<Grid display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/2.jpg" />
</Grid>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/3.jpg" />
</Grid>
</Grid>
</Box>
);
}
22 changes: 22 additions & 0 deletions docs/data/material/components/grid2/CenteredElementGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';

export default function CenteredElementGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} minHeight={160}>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/1.jpg" />
</Grid>
<Grid display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/2.jpg" />
</Grid>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/3.jpg" />
</Grid>
</Grid>
</Box>
);
}
11 changes: 11 additions & 0 deletions docs/data/material/components/grid2/CenteredElementGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Grid container spacing={2} minHeight={160}>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/1.jpg" />
</Grid>
<Grid display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/2.jpg" />
</Grid>
<Grid xs display="flex" justifyContent="center" alignItems="center">
<Avatar src="/static/images/avatar/3.jpg" />
</Grid>
</Grid>
28 changes: 28 additions & 0 deletions docs/data/material/components/grid2/ColumnsGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function ColumnsGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} columns={16}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
28 changes: 28 additions & 0 deletions docs/data/material/components/grid2/ColumnsGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function ColumnsGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} columns={16}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
8 changes: 8 additions & 0 deletions docs/data/material/components/grid2/ColumnsGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<Grid container spacing={2} columns={16}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
29 changes: 29 additions & 0 deletions docs/data/material/components/grid2/FullBorderedGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';

export default function FullBorderedGrid() {
return (
<Box sx={{ flexGrow: 1, p: 2 }}>
<Grid
container
spacing={2}
sx={{
'--Grid-borderWidth': '1px',
borderTop: 'var(--Grid-borderWidth) solid',
borderLeft: 'var(--Grid-borderWidth) solid',
borderColor: 'divider',
'& > div': {
borderRight: 'var(--Grid-borderWidth) solid',
borderBottom: 'var(--Grid-borderWidth) solid',
borderColor: 'divider',
},
}}
>
{[...Array(6)].map((_, index) => (
<Grid key={index} {...{ xs: 12, sm: 6, md: 4, lg: 3 }} minHeight={160} />
))}
</Grid>
</Box>
);
}
29 changes: 29 additions & 0 deletions docs/data/material/components/grid2/FullBorderedGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';

export default function FullBorderedGrid() {
return (
<Box sx={{ flexGrow: 1, p: 2 }}>
<Grid
container
spacing={2}
sx={{
'--Grid-borderWidth': '1px',
borderTop: 'var(--Grid-borderWidth) solid',
borderLeft: 'var(--Grid-borderWidth) solid',
borderColor: 'divider',
'& > div': {
borderRight: 'var(--Grid-borderWidth) solid',
borderBottom: 'var(--Grid-borderWidth) solid',
borderColor: 'divider',
},
}}
>
{[...Array(6)].map((_, index) => (
<Grid key={index} {...{ xs: 12, sm: 6, md: 4, lg: 3 }} minHeight={160} />
))}
</Grid>
</Box>
);
}
34 changes: 34 additions & 0 deletions docs/data/material/components/grid2/FullWidthGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Unstable_Grid2';

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));

export default function FullWidthGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
</Box>
);
}
Loading