Skip to content

Commit 198f679

Browse files
mnajdovamnajdova
authored
[system] Add Stack component (#33760)
1 parent 0abfc15 commit 198f679

32 files changed

+1593
-7
lines changed

‎docs/data/system/components/stack/BasicStack.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import { styled, Box, Stack } from '@mui/system';
4+
5+
const Item = styled(Paper)(({ theme }) => ({
6+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
7+
padding: theme.spacing(1),
8+
textAlign: 'center',
9+
}));
10+
11+
export default function BasicStack() {
12+
return (
13+
<Box sx={{ width: '100%' }}>
14+
<Stack spacing={2}>
15+
<Item>Item 1</Item>
16+
<Item>Item 2</Item>
17+
<Item>Item 3</Item>
18+
</Stack>
19+
</Box>
20+
);
21+
}

‎docs/data/system/components/stack/BasicStack.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import { styled, Box, Stack } from '@mui/system';
4+
5+
const Item = styled(Paper)(({ theme }) => ({
6+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
7+
padding: theme.spacing(1),
8+
textAlign: 'center',
9+
}));
10+
11+
export default function BasicStack() {
12+
return (
13+
<Box sx={{ width: '100%' }}>
14+
<Stack spacing={2}>
15+
<Item>Item 1</Item>
16+
<Item>Item 2</Item>
17+
<Item>Item 3</Item>
18+
</Stack>
19+
</Box>
20+
);
21+
}

‎docs/data/system/components/stack/BasicStack.tsx.preview‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Stack spacing={2}>
2+
<Item>Item 1</Item>
3+
<Item>Item 2</Item>
4+
<Item>Item 3</Item>
5+
</Stack>

‎docs/data/system/components/stack/DirectionStack.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import { styled, Stack } from '@mui/system';
4+
5+
const Item = styled(Paper)(({ theme }) => ({
6+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
7+
padding: theme.spacing(1),
8+
textAlign: 'center',
9+
}));
10+
11+
export default function DirectionStack() {
12+
return (
13+
<div>
14+
<Stack direction="row" spacing={2}>
15+
<Item>Item 1</Item>
16+
<Item>Item 2</Item>
17+
<Item>Item 3</Item>
18+
</Stack>
19+
</div>
20+
);
21+
}

‎docs/data/system/components/stack/DirectionStack.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import { styled, Stack } from '@mui/system';
4+
5+
const Item = styled(Paper)(({ theme }) => ({
6+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
7+
padding: theme.spacing(1),
8+
textAlign: 'center',
9+
}));
10+
11+
export default function DirectionStack() {
12+
return (
13+
<div>
14+
<Stack direction="row" spacing={2}>
15+
<Item>Item 1</Item>
16+
<Item>Item 2</Item>
17+
<Item>Item 3</Item>
18+
</Stack>
19+
</div>
20+
);
21+
}

‎docs/data/system/components/stack/DirectionStack.tsx.preview‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Stack direction="row" spacing={2}>
2+
<Item>Item 1</Item>
3+
<Item>Item 2</Item>
4+
<Item>Item 3</Item>
5+
</Stack>

‎docs/data/system/components/stack/DividerStack.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import Divider from '@mui/material/Divider';
4+
import { styled, Stack } from '@mui/system';
5+
6+
const Item = styled(Paper)(({ theme }) => ({
7+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
8+
padding: theme.spacing(1),
9+
textAlign: 'center',
10+
}));
11+
12+
export default function DividerStack() {
13+
return (
14+
<div>
15+
<Stack
16+
direction="row"
17+
divider={<Divider orientation="vertical" flexItem />}
18+
spacing={2}
19+
>
20+
<Item>Item 1</Item>
21+
<Item>Item 2</Item>
22+
<Item>Item 3</Item>
23+
</Stack>
24+
</div>
25+
);
26+
}

‎docs/data/system/components/stack/DividerStack.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import Divider from '@mui/material/Divider';
4+
import { styled, Stack } from '@mui/system';
5+
6+
const Item = styled(Paper)(({ theme }) => ({
7+
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
8+
padding: theme.spacing(1),
9+
textAlign: 'center',
10+
}));
11+
12+
export default function DividerStack() {
13+
return (
14+
<div>
15+
<Stack
16+
direction="row"
17+
divider={<Divider orientation="vertical" flexItem />}
18+
spacing={2}
19+
>
20+
<Item>Item 1</Item>
21+
<Item>Item 2</Item>
22+
<Item>Item 3</Item>
23+
</Stack>
24+
</div>
25+
);
26+
}

‎docs/data/system/components/stack/DividerStack.tsx.preview‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Stack
2+
direction="row"
3+
divider={<Divider orientation="vertical" flexItem />}
4+
spacing={2}
5+
>
6+
<Item>Item 1</Item>
7+
<Item>Item 2</Item>
8+
<Item>Item 3</Item>
9+
</Stack>

‎docs/data/system/components/stack/InteractiveStack.js‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import * as React from 'react';
2+
import FormControl from '@mui/material/FormControl';
3+
import FormLabel from '@mui/material/FormLabel';
4+
import FormControlLabel from '@mui/material/FormControlLabel';
5+
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
6+
import Paper from '@mui/material/Paper';
7+
import RadioGroup from '@mui/material/RadioGroup';
8+
import Radio from '@mui/material/Radio';
9+
import { Stack, Unstable_Grid as Grid } from '@mui/system';
10+
11+
export default function InteractiveStack() {
12+
const [direction, setDirection] = React.useState('row');
13+
const [justifyContent, setJustifyContent] = React.useState('center');
14+
const [alignItems, setAlignItems] = React.useState('center');
15+
const [spacing, setSpacing] = React.useState(2);
16+
17+
const jsx = `
18+
<Stack
19+
direction="${direction}"
20+
justifyContent="${justifyContent}"
21+
alignItems="${alignItems}"
22+
spacing={${spacing}}
23+
>
24+
`;
25+
26+
return (
27+
<Stack sx={{ flexGrow: 1 }}>
28+
<Stack
29+
direction={direction}
30+
justifyContent={justifyContent}
31+
alignItems={alignItems}
32+
spacing={spacing}
33+
sx={{ height: 240 }}
34+
>
35+
{[0, 1, 2].map((value) => (
36+
<Paper
37+
key={value}
38+
sx={{
39+
p: 2,
40+
pt: value + 1,
41+
pb: value + 1,
42+
color: 'text.secondary',
43+
typography: 'body2',
44+
backgroundColor: (theme) =>
45+
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
46+
}}
47+
>
48+
{`Item ${value + 1}`}
49+
</Paper>
50+
))}
51+
</Stack>
52+
<Paper sx={{ p: 2 }}>
53+
<Grid container spacing={3}>
54+
<Grid xs={12}>
55+
<FormControl component="fieldset">
56+
<FormLabel component="legend">direction</FormLabel>
57+
<RadioGroup
58+
row
59+
name="direction"
60+
aria-label="direction"
61+
value={direction}
62+
onChange={(event) => {
63+
setDirection(event.target.value);
64+
}}
65+
>
66+
<FormControlLabel value="row" control={<Radio />} label="row" />
67+
<FormControlLabel
68+
value="row-reverse"
69+
control={<Radio />}
70+
label="row-reverse"
71+
/>
72+
<FormControlLabel
73+
value="column"
74+
control={<Radio />}
75+
label="column"
76+
/>
77+
<FormControlLabel
78+
value="column-reverse"
79+
control={<Radio />}
80+
label="column-reverse"
81+
/>
82+
</RadioGroup>
83+
</FormControl>
84+
</Grid>
85+
<Grid xs={12}>
86+
<FormControl component="fieldset">
87+
<FormLabel component="legend">alignItems</FormLabel>
88+
<RadioGroup
89+
row
90+
name="alignItems"
91+
aria-label="align items"
92+
value={alignItems}
93+
onChange={(event) => {
94+
setAlignItems(event.target.value);
95+
}}
96+
>
97+
<FormControlLabel
98+
value="flex-start"
99+
control={<Radio />}
100+
label="flex-start"
101+
/>
102+
<FormControlLabel
103+
value="center"
104+
control={<Radio />}
105+
label="center"
106+
/>
107+
<FormControlLabel
108+
value="flex-end"
109+
control={<Radio />}
110+
label="flex-end"
111+
/>
112+
<FormControlLabel
113+
value="stretch"
114+
control={<Radio />}
115+
label="stretch"
116+
/>
117+
<FormControlLabel
118+
value="baseline"
119+
control={<Radio />}
120+
label="baseline"
121+
/>
122+
</RadioGroup>
123+
</FormControl>
124+
</Grid>
125+
<Grid xs={12}>
126+
<FormControl component="fieldset">
127+
<FormLabel component="legend">justifyContent</FormLabel>
128+
<RadioGroup
129+
row
130+
name="justifyContent"
131+
aria-label="justifyContent"
132+
value={justifyContent}
133+
onChange={(event) => {
134+
setJustifyContent(event.target.value);
135+
}}
136+
>
137+
<FormControlLabel
138+
value="flex-start"
139+
control={<Radio />}
140+
label="flex-start"
141+
/>
142+
<FormControlLabel
143+
value="center"
144+
control={<Radio />}
145+
label="center"
146+
/>
147+
<FormControlLabel
148+
value="flex-end"
149+
control={<Radio />}
150+
label="flex-end"
151+
/>
152+
<FormControlLabel
153+
value="space-between"
154+
control={<Radio />}
155+
label="space-between"
156+
/>
157+
<FormControlLabel
158+
value="space-around"
159+
control={<Radio />}
160+
label="space-around"
161+
/>
162+
<FormControlLabel
163+
value="space-evenly"
164+
control={<Radio />}
165+
label="space-evenly"
166+
/>
167+
</RadioGroup>
168+
</FormControl>
169+
</Grid>
170+
<Grid xs={12}>
171+
<FormControl component="fieldset">
172+
<FormLabel component="legend">spacing</FormLabel>
173+
<RadioGroup
174+
row
175+
name="spacing"
176+
aria-label="spacing"
177+
value={spacing.toString()}
178+
onChange={(event) => {
179+
setSpacing(Number(event.target.value));
180+
}}
181+
>
182+
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
183+
<FormControlLabel
184+
key={value}
185+
value={value.toString()}
186+
control={<Radio />}
187+
label={value}
188+
/>
189+
))}
190+
</RadioGroup>
191+
</FormControl>
192+
</Grid>
193+
</Grid>
194+
</Paper>
195+
<HighlightedCode code={jsx} language="jsx" />
196+
</Stack>
197+
);
198+
}

0 commit comments

Comments
 (0)