[docs] Add Grid version 2 docs (#33554)

mui · Aug 2, 2022 · 5009907 · 5009907
1 parent 4e5e2a7
commit 5009907
Show file tree

Hide file tree

Showing 49 changed files with 1,792 additions and 32 deletions.
diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid2/AutoGrid.js
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/AutoGrid.tsx.preview b/docs/data/material/components/grid2/AutoGrid.tsx.preview
@@ -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>
diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid2/BasicGrid.js
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/BasicGrid.tsx.preview b/docs/data/material/components/grid2/BasicGrid.tsx.preview
@@ -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>
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.js b/docs/data/material/components/grid2/CenteredElementGrid.js
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx b/docs/data/material/components/grid2/CenteredElementGrid.tsx
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview b/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview
@@ -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>
diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid2/ColumnsGrid.js
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview b/docs/data/material/components/grid2/ColumnsGrid.tsx.preview
@@ -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>
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.js b/docs/data/material/components/grid2/FullBorderedGrid.js
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/FullBorderedGrid.tsx b/docs/data/material/components/grid2/FullBorderedGrid.tsx
@@ -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>
+  );
+}
diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid2/FullWidthGrid.js
@@ -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>
+  );
+}