Skip to content
New issue

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

#

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

Already on GitHub? # to your account

[docs] Add interactive demo for Grid v2 #44820

Merged
merged 1 commit into from
Dec 24, 2024
Merged

[docs] Add interactive demo for Grid v2 #44820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
184 changes: 184 additions & 0 deletions docs/data/material/components/grid2/InteractiveGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
import * as React from 'react';
import Grid from '@mui/material/Grid2';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Paper from '@mui/material/Paper';
import { HighlightedCode } from '@mui/docs/HighlightedCode';

export default function InteractiveGrid() {
const [direction, setDirection] = React.useState('row');
const [justifyContent, setJustifyContent] = React.useState('center');
const [alignItems, setAlignItems] = React.useState('center');

const jsx = `
<Grid
container
direction="${direction}"
sx={{
justifyContent: "${justifyContent}",
alignItems: "${alignItems}",
}}
>
`;

return (
<Grid sx={{ flexGrow: 1 }} container>
<Grid size={12}>
<Grid
container
spacing={2}
direction={direction}
sx={{ alignItems, justifyContent, height: 300, pb: 2 }}
>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={(theme) => ({
p: 2,
backgroundColor: '#fff',
height: '100%',
color: 'text.secondary',
pt: `${(value + 1) * 10}px`,
pb: `${(value + 1) * 10}px`,
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
})}
>
{`Cell ${value + 1}`}
</Paper>
</Grid>
))}
</Grid>
</Grid>
<Grid size={12}>
<Paper sx={{ p: 2 }}>
<Grid container spacing={3}>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">direction</FormLabel>
<RadioGroup
row
name="direction"
aria-label="direction"
value={direction}
onChange={(event) => {
setDirection(event.target.value);
}}
>
<FormControlLabel value="row" control={<Radio />} label="row" />
<FormControlLabel
value="row-reverse"
control={<Radio />}
label="row-reverse"
/>
<FormControlLabel
value="column"
control={<Radio />}
label="column"
/>
<FormControlLabel
value="column-reverse"
control={<Radio />}
label="column-reverse"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">justifyContent</FormLabel>
<RadioGroup
row
name="justifyContent"
aria-label="justifyContent"
value={justifyContent}
onChange={(event) => {
setJustifyContent(event.target.value);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="space-between"
control={<Radio />}
label="space-between"
/>
<FormControlLabel
value="space-around"
control={<Radio />}
label="space-around"
/>
<FormControlLabel
value="space-evenly"
control={<Radio />}
label="space-evenly"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">alignItems</FormLabel>
<RadioGroup
row
name="alignItems"
aria-label="align items"
value={alignItems}
onChange={(event) => {
setAlignItems(event.target.value);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="stretch"
control={<Radio />}
label="stretch"
/>
<FormControlLabel
value="baseline"
control={<Radio />}
label="baseline"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid size={12}>
<HighlightedCode code={jsx} language="jsx" />
</Grid>
</Grid>
);
}
206 changes: 206 additions & 0 deletions docs/data/material/components/grid2/InteractiveGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
import * as React from 'react';
import Grid, { GridDirection } from '@mui/material/Grid2';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Paper from '@mui/material/Paper';
import { HighlightedCode } from '@mui/docs/HighlightedCode';

type GridItemsAlignment =
| 'flex-start'
| 'center'
| 'flex-end'
| 'stretch'
| 'baseline';

type GridJustification =
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly';

export default function InteractiveGrid() {
const [direction, setDirection] = React.useState<GridDirection>('row');
const [justifyContent, setJustifyContent] =
React.useState<GridJustification>('center');
const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');

const jsx = `
<Grid
container
direction="${direction}"
sx={{
justifyContent: "${justifyContent}",
alignItems: "${alignItems}",
}}
>
`;

return (
<Grid sx={{ flexGrow: 1 }} container>
<Grid size={12}>
<Grid
container
spacing={2}
direction={direction}
sx={{ alignItems, justifyContent, height: 300, pb: 2 }}
>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={(theme) => ({
p: 2,
backgroundColor: '#fff',
height: '100%',
color: 'text.secondary',
pt: `${(value + 1) * 10}px`,
pb: `${(value + 1) * 10}px`,
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
})}
>
{`Cell ${value + 1}`}
</Paper>
</Grid>
))}
</Grid>
</Grid>
<Grid size={12}>
<Paper sx={{ p: 2 }}>
<Grid container spacing={3}>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">direction</FormLabel>
<RadioGroup
row
name="direction"
aria-label="direction"
value={direction}
onChange={(event) => {
setDirection(
(event.target as HTMLInputElement).value as GridDirection,
);
}}
>
<FormControlLabel value="row" control={<Radio />} label="row" />
<FormControlLabel
value="row-reverse"
control={<Radio />}
label="row-reverse"
/>
<FormControlLabel
value="column"
control={<Radio />}
label="column"
/>
<FormControlLabel
value="column-reverse"
control={<Radio />}
label="column-reverse"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">justifyContent</FormLabel>
<RadioGroup
row
name="justifyContent"
aria-label="justifyContent"
value={justifyContent}
onChange={(event) => {
setJustifyContent(
(event.target as HTMLInputElement).value as GridJustification,
);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="space-between"
control={<Radio />}
label="space-between"
/>
<FormControlLabel
value="space-around"
control={<Radio />}
label="space-around"
/>
<FormControlLabel
value="space-evenly"
control={<Radio />}
label="space-evenly"
/>
</RadioGroup>
</FormControl>
</Grid>
<Grid size={12}>
<FormControl component="fieldset">
<FormLabel component="legend">alignItems</FormLabel>
<RadioGroup
row
name="alignItems"
aria-label="align items"
value={alignItems}
onChange={(event) => {
setAlignItems(
(event.target as HTMLInputElement).value as GridItemsAlignment,
);
}}
>
<FormControlLabel
value="flex-start"
control={<Radio />}
label="flex-start"
/>
<FormControlLabel
value="center"
control={<Radio />}
label="center"
/>
<FormControlLabel
value="flex-end"
control={<Radio />}
label="flex-end"
/>
<FormControlLabel
value="stretch"
control={<Radio />}
label="stretch"
/>
<FormControlLabel
value="baseline"
control={<Radio />}
label="baseline"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
</Grid>
<Grid size={12}>
<HighlightedCode code={jsx} language="jsx" />
</Grid>
</Grid>
);
}
Loading
Loading