how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

init project
Some checks failed
No response / noResponse (push) Has been cancelled
Details
CI / Continuous releases (push) Has been cancelled
Details
CI / test-dev (macos-latest) (push) Has been cancelled
Details
CI / test-dev (ubuntu-latest) (push) Has been cancelled
Details
CI / test-dev (windows-latest) (push) Has been cancelled
Details
Maintenance / main (push) Has been cancelled
Details
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details

Browse Source
This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/data/system/borders/BorderAdditive.js Normal file
View File

@@ -0,0 +1,21 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
m: 1,
borderColor: 'text.primary',
width: '5rem',
height: '5rem',
};
export default function BorderAdditive() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, border: 1 }} />
<Box sx={{ ...commonStyles, borderTop: 1 }} />
<Box sx={{ ...commonStyles, borderRight: 1 }} />
<Box sx={{ ...commonStyles, borderBottom: 1 }} />
<Box sx={{ ...commonStyles, borderLeft: 1 }} />
</Box>
);
}

21
docs/data/system/borders/BorderAdditive.tsx Normal file
View File

@@ -0,0 +1,21 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
m: 1,
borderColor: 'text.primary',
width: '5rem',
height: '5rem',
};
export default function BorderAdditive() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, border: 1 }} />
<Box sx={{ ...commonStyles, borderTop: 1 }} />
<Box sx={{ ...commonStyles, borderRight: 1 }} />
<Box sx={{ ...commonStyles, borderBottom: 1 }} />
<Box sx={{ ...commonStyles, borderLeft: 1 }} />
</Box>
);
}

5
docs/data/system/borders/BorderAdditive.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Box sx={{ ...commonStyles, border: 1 }} />
<Box sx={{ ...commonStyles, borderTop: 1 }} />
<Box sx={{ ...commonStyles, borderRight: 1 }} />
<Box sx={{ ...commonStyles, borderBottom: 1 }} />
<Box sx={{ ...commonStyles, borderLeft: 1 }} />

21
docs/data/system/borders/BorderColor.js Normal file
View File

@@ -0,0 +1,21 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
m: 1,
border: 1,
width: '5rem',
height: '5rem',
};
export default function BorderColor() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'grey.500' }} />
<Box sx={{ ...commonStyles, borderColor: 'text.primary' }} />
</Box>
);
}

21
docs/data/system/borders/BorderColor.tsx Normal file
View File

@@ -0,0 +1,21 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
m: 1,
border: 1,
width: '5rem',
height: '5rem',
};
export default function BorderColor() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'grey.500' }} />
<Box sx={{ ...commonStyles, borderColor: 'text.primary' }} />
</Box>
);
}

5
docs/data/system/borders/BorderColor.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Box sx={{ ...commonStyles, borderColor: 'primary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'error.main' }} />
<Box sx={{ ...commonStyles, borderColor: 'grey.500' }} />
<Box sx={{ ...commonStyles, borderColor: 'text.primary' }} />

20
docs/data/system/borders/BorderRadius.js Normal file
View File

@@ -0,0 +1,20 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
borderColor: 'text.primary',
m: 1,
border: 1,
width: '5rem',
height: '5rem',
};
export default function BorderRadius() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, borderRadius: '50%' }} />
<Box sx={{ ...commonStyles, borderRadius: 1 }} />
<Box sx={{ ...commonStyles, borderRadius: '16px' }} />
</Box>
);
}

20
docs/data/system/borders/BorderRadius.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
borderColor: 'text.primary',
m: 1,
border: 1,
width: '5rem',
height: '5rem',
};
export default function BorderRadius() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, borderRadius: '50%' }} />
<Box sx={{ ...commonStyles, borderRadius: 1 }} />
<Box sx={{ ...commonStyles, borderRadius: '16px' }} />
</Box>
);
}

3
docs/data/system/borders/BorderRadius.tsx.preview Normal file
View File

@@ -0,0 +1,3 @@
<Box sx={{ ...commonStyles, borderRadius: '50%' }} />
<Box sx={{ ...commonStyles, borderRadius: 1 }} />
<Box sx={{ ...commonStyles, borderRadius: '16px' }} />

22
docs/data/system/borders/BorderSubtractive.js Normal file
View File

@@ -0,0 +1,22 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
border: 1,
m: 1,
borderColor: 'text.primary',
width: '5rem',
height: '5rem',
};
export default function BorderSubtractive() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, border: 0 }} />
<Box sx={{ ...commonStyles, borderTop: 0 }} />
<Box sx={{ ...commonStyles, borderRight: 0 }} />
<Box sx={{ ...commonStyles, borderBottom: 0 }} />
<Box sx={{ ...commonStyles, borderLeft: 0 }} />
</Box>
);
}

22
docs/data/system/borders/BorderSubtractive.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Box from '@mui/material/Box';
const commonStyles = {
bgcolor: 'background.paper',
border: 1,
m: 1,
borderColor: 'text.primary',
width: '5rem',
height: '5rem',
};
export default function BorderSubtractive() {
return (
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Box sx={{ ...commonStyles, border: 0 }} />
<Box sx={{ ...commonStyles, borderTop: 0 }} />
<Box sx={{ ...commonStyles, borderRight: 0 }} />
<Box sx={{ ...commonStyles, borderBottom: 0 }} />
<Box sx={{ ...commonStyles, borderLeft: 0 }} />
</Box>
);
}

5
docs/data/system/borders/BorderSubtractive.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Box sx={{ ...commonStyles, border: 0 }} />
<Box sx={{ ...commonStyles, borderTop: 0 }} />
<Box sx={{ ...commonStyles, borderRight: 0 }} />
<Box sx={{ ...commonStyles, borderBottom: 0 }} />
<Box sx={{ ...commonStyles, borderLeft: 0 }} />

73
docs/data/system/borders/borders.md Normal file
View File

@@ -0,0 +1,73 @@
# Borders
<p class="description">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
## Border
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
### Additive
{{"demo": "BorderAdditive.js", "defaultCodeOpen": false, "bg": true}}
```jsx
<Box sx={{ border: 1 }}>…
<Box sx={{ borderTop: 1 }}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ borderBottom: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…
```
### Subtractive
{{"demo": "BorderSubtractive.js", "defaultCodeOpen": false, "bg": true}}
```jsx
<Box sx={{ border: 0 }}>…
<Box sx={{ borderTop: 0 }}>…
<Box sx={{ borderRight: 0 }}>…
<Box sx={{ borderBottom: 0 }}>…
<Box sx={{ borderLeft: 0 }}>…
```
## Border color
{{"demo": "BorderColor.js", "defaultCodeOpen": false}}
```jsx
<Box sx={{ borderColor: 'primary.main' }}>…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box sx={{ borderColor: 'error.main' }}>…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box sx={{ borderColor: 'text.primary' }}>…
```
## Border-radius
{{"demo": "BorderRadius.js", "defaultCodeOpen": false}}
```jsx
<Box sx={{ borderRadius: '50%' }}>…
<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
<Box sx={{ borderRadius: '16px' }}>…
```
## API
```js
import { borders } from '@mui/system';
```
| Import name | Prop | CSS property | Theme key |
| :------------------ | :------------------ | :-------------------- | :--------------------------------------------------------------------------- |
| `border` | `border` | `border` | `borders` |
| `borderTop` | `borderTop` | `border-top` | `borders` |
| `borderLeft` | `borderLeft` | `border-left` | `borders` |
| `borderRight` | `borderRight` | `border-right` | `borders` |
| `borderBottom` | `borderBottom` | `border-bottom` | `borders` |
| `borderColor` | `borderColor` | `border-color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `borderTopColor` | `borderTopColor` | `border-top-color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `borderRightColor` | `borderRightColor` | `border-right-color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `borderBottomColor` | `borderBottomColor` | `border-bottom-color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `borderLeftColor` | `borderLeftColor` | `border-left-color` | [`palette`](/material-ui/customization/default-theme/?expand-path=$.palette) |
| `borderRadius` | `borderRadius` | `border-radius` | [`shape`](/material-ui/customization/default-theme/?expand-path=$.shape) |

9
docs/data/system/components/box/BoxBasic.js Normal file
View File

@@ -0,0 +1,9 @@
import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
This Box renders as an HTML section element.
</Box>
);
}

9
docs/data/system/components/box/BoxBasic.tsx Normal file
View File

@@ -0,0 +1,9 @@
import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
<Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
This Box renders as an HTML section element.
</Box>
);
}

2
docs/data/system/components/box/BoxBasic.tsx.preview Normal file
View File

@@ -0,0 +1,2 @@
This Box renders as an HTML section element.

28
docs/data/system/components/box/BoxSx.js Normal file
View File

@@ -0,0 +1,28 @@
import { Box, ThemeProvider } from '@mui/system';
export default function BoxSx() {
return (
<ThemeProvider
theme={{
palette: {
primary: {
main: '#007FFF',
dark: '#0066CC',
},
},
}}
>
<Box
sx={{
width: 100,
height: 100,
borderRadius: 1,
bgcolor: 'primary.main',
'&:hover': {
bgcolor: 'primary.dark',
},
}}
/>
</ThemeProvider>
);
}

28
docs/data/system/components/box/BoxSx.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Box, ThemeProvider } from '@mui/system';
export default function BoxSx() {
return (
<ThemeProvider
theme={{
palette: {
primary: {
main: '#007FFF',
dark: '#0066CC',
},
},
}}
>
<Box
sx={{
width: 100,
height: 100,
borderRadius: 1,
bgcolor: 'primary.main',
'&:hover': {
bgcolor: 'primary.dark',
},
}}
/>
</ThemeProvider>
);
}

20
docs/data/system/components/box/BoxSystemProps.js Normal file
View File

@@ -0,0 +1,20 @@
import Box from '@mui/system/Box';
export default function BoxSystemProps() {
return (
<Box
sx={{
height: 200,
width: 200,
my: 4,
display: 'flex',
alignItems: 'center',
gap: 4,
p: 2,
border: '2px solid grey',
}}
>
This Box uses MUI System props for quick customization.
</Box>
);
}

20
docs/data/system/components/box/BoxSystemProps.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Box from '@mui/system/Box';
export default function BoxSystemProps() {
return (
<Box
sx={{
height: 200,
width: 200,
my: 4,
display: 'flex',
alignItems: 'center',
gap: 4,
p: 2,
border: '2px solid grey',
}}
>
This Box uses MUI System props for quick customization.
</Box>
);
}

2
docs/data/system/components/box/BoxSystemProps.tsx.preview Normal file
View File

@@ -0,0 +1,2 @@
This Box uses MUI System props for quick customization.

78
docs/data/system/components/box/box.md Normal file
View File

@@ -0,0 +1,78 @@
---
productId: system
title: React Box component
components: Box
githubLabel: 'component: Box'
---
<!-- This page's content is duplicated (with some product-specific details) across the Material UI, Joy UI, and MUI System docs. Any changes should be applied to all three pages at the same time. -->
# Box
<p class="description">The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.</p>
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
## Introduction
The Box component is a generic container for grouping other components.
It's a fundamental building block when working with MUI System—you can think of it as a `<div>` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
### Usage
The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `<div>`.
Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.
## Basics
```jsx
import Box from '@mui/system/Box';
```
The Box component renders as a `<div>` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
The demo below replaces the `<div>` with a `<section>` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
## Customization
### With MUI System props
As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
You can use them as props directly on the component.
{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
### With the sx prop
Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
The demo below shows how to apply colors from the theme using this prop:
{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
### Create your own Box
Use the `createBox()` utility to create your version of the Box component.
This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
```js
import { createBox, createTheme } from '@mui/system';
const defaultTheme = createTheme({
// your custom theme values
});
const Box = createBox({ defaultTheme });
export default Box;
```
## Anatomy
The Box component is composed of a single root `<div>` element:
```html
<div className="MuiBox-root">
<!-- contents of the Box -->
</div>
```

14
docs/data/system/components/container/FixedContainer.js Normal file
View File

@@ -0,0 +1,14 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { Box, Container } from '@mui/system';
export default function FixedContainer() {
return (
<React.Fragment>
<CssBaseline />
<Container fixed>
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}

14
docs/data/system/components/container/FixedContainer.tsx Normal file
View File

@@ -0,0 +1,14 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { Box, Container } from '@mui/system';
export default function FixedContainer() {
return (
<React.Fragment>
<CssBaseline />
<Container fixed>
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}

6
docs/data/system/components/container/FixedContainer.tsx.preview Normal file
View File

@@ -0,0 +1,6 @@
<React.Fragment>
<CssBaseline />
<Container fixed>
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>

14
docs/data/system/components/container/SimpleContainer.js Normal file
View File

@@ -0,0 +1,14 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { Box, Container } from '@mui/system';
export default function SimpleContainer() {
return (
<React.Fragment>
<CssBaseline />
<Container maxWidth="sm">
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}

14
docs/data/system/components/container/SimpleContainer.tsx Normal file
View File

@@ -0,0 +1,14 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { Box, Container } from '@mui/system';
export default function SimpleContainer() {
return (
<React.Fragment>
<CssBaseline />
<Container maxWidth="sm">
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>
);
}

6
docs/data/system/components/container/SimpleContainer.tsx.preview Normal file
View File

@@ -0,0 +1,6 @@
<React.Fragment>
<CssBaseline />
<Container maxWidth="sm">
<Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
</Container>
</React.Fragment>

35
docs/data/system/components/container/container.md Normal file
View File

@@ -0,0 +1,35 @@
---
productId: system
title: React Container component
components: Container
githubLabel: 'component: Container'
---
# Container
<p class="description">The container centers your content horizontally. It's the most basic layout element.</p>
While containers can be nested, most layouts do not require a nested container.
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
## Fluid
A fluid container width is bounded by the `maxWidth` prop value.
{{"demo": "SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}}
```jsx
<Container maxWidth="sm">
```
## Fixed
If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` prop.
The max-width matches the min-width of the current breakpoint.
{{"demo": "FixedContainer.js", "iframe": true, "defaultCodeOpen": false}}
```jsx
<Container fixed>
```

34
docs/data/system/components/grid/AutoGrid.js Normal file
View File

@@ -0,0 +1,34 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
</Box>
);
}

34
docs/data/system/components/grid/AutoGrid.tsx Normal file
View File

@@ -0,0 +1,34 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function AutoGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
</Box>
);
}

11
docs/data/system/components/grid/AutoGrid.tsx.preview Normal file
View File

@@ -0,0 +1,11 @@
<Grid container spacing={3}>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>

53
docs/data/system/components/grid/AutoGridNoWrap.js Normal file
View File

@@ -0,0 +1,53 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
const Item = styled('div')(({ theme }) => ({
border: '1px solid',
borderColor: '#ced7e0',
borderRadius: 4,
...theme.applyStyles('dark', {
borderColor: '#444d58',
}),
}));
const message = `Truncation should be conditionally applicable on this long line of text
as this is a much longer line than what the container can support. `;
export default function AutoGridNoWrap() {
return (
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3, maxWidth: 400 }}>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid>
<Avatar>W</Avatar>
</Grid>
<Grid size="grow">
<Typography noWrap>{message}</Typography>
</Grid>
</Grid>
</Item>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid>
<Avatar>W</Avatar>
</Grid>
<Grid size="grow">
<Typography
sx={{
display: '-webkit-box',
WebkitLineClamp: '3',
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}}
>
{message}
</Typography>
</Grid>
</Grid>
</Item>
</Box>
);
}

53
docs/data/system/components/grid/AutoGridNoWrap.tsx Normal file
View File

@@ -0,0 +1,53 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
const Item = styled('div')(({ theme }) => ({
border: '1px solid',
borderColor: '#ced7e0',
borderRadius: 4,
...theme.applyStyles('dark', {
borderColor: '#444d58',
}),
}));
const message = `Truncation should be conditionally applicable on this long line of text
as this is a much longer line than what the container can support. `;
export default function AutoGridNoWrap() {
return (
<Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3, maxWidth: 400 }}>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid>
<Avatar>W</Avatar>
</Grid>
<Grid size="grow">
<Typography noWrap>{message}</Typography>
</Grid>
</Grid>
</Item>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
<Grid container wrap="nowrap" spacing={2}>
<Grid>
<Avatar>W</Avatar>
</Grid>
<Grid size="grow">
<Typography
sx={{
display: '-webkit-box',
WebkitLineClamp: '3',
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}}
>
{message}
</Typography>
</Grid>
</Grid>
</Item>
</Box>
);
}

37
docs/data/system/components/grid/BasicGrid.js Normal file
View File

@@ -0,0 +1,37 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
</Box>
);
}

37
docs/data/system/components/grid/BasicGrid.tsx Normal file
View File

@@ -0,0 +1,37 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
</Box>
);
}

14
docs/data/system/components/grid/BasicGrid.tsx.preview Normal file
View File

@@ -0,0 +1,14 @@
<Grid container spacing={2}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>

31
docs/data/system/components/grid/ColumnsGrid.js Normal file
View File

@@ -0,0 +1,31 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function ColumnsGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} columns={16}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
</Box>
);
}

31
docs/data/system/components/grid/ColumnsGrid.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function ColumnsGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} columns={16}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
</Box>
);
}

8
docs/data/system/components/grid/ColumnsGrid.tsx.preview Normal file
View File

@@ -0,0 +1,8 @@
<Grid container spacing={2} columns={16}>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>

51
docs/data/system/components/grid/CustomBreakpointsGrid.js Normal file
View File

@@ -0,0 +1,51 @@
import { ThemeProvider, createTheme } from '@mui/system';
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function CustomBreakpointsGrid() {
return (
<ThemeProvider
theme={createTheme({
breakpoints: {
values: {
laptop: 1024,
tablet: 640,
mobile: 0,
desktop: 1280,
},
},
})}
>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ mobile: 1, tablet: 2, laptop: 3 }}>
{Array.from(Array(4)).map((_, index) => (
<Grid
key={index}
size={{
mobile: 6,
tablet: 4,
laptop: 3,
}}
>
<Item>{index + 1}</Item>
</Grid>
))}
</Grid>
</Box>
</ThemeProvider>
);
}

37
docs/data/system/components/grid/FullWidthGrid.js Normal file
View File

@@ -0,0 +1,37 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function FullWidthGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
</Box>
);
}

37
docs/data/system/components/grid/FullWidthGrid.tsx Normal file
View File

@@ -0,0 +1,37 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function FullWidthGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
</Box>
);
}

14
docs/data/system/components/grid/FullWidthGrid.tsx.preview Normal file
View File

@@ -0,0 +1,14 @@
<Grid container spacing={2}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>

109
docs/data/system/components/grid/NestedGrid.js Normal file
View File

@@ -0,0 +1,109 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
border: '1px solid',
borderColor: '#ced7e0',
borderRadius: '4px',
...theme.applyStyles('dark', {
borderColor: '#444d58',
}),
}));
export default function NestedGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 12, md: 5, lg: 4 }}>
<Item>Email subscribe section</Item>
</Grid>
<Grid container spacing={4} size={{ xs: 12, md: 7, lg: 8 }}>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-a"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category A
</Box>
<Box component="ul" aria-labelledby="category-a" sx={{ pl: 2 }}>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-b"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category B
</Box>
<Box component="ul" aria-labelledby="category-b" sx={{ pl: 2 }}>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-c"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category C
</Box>
<Box component="ul" aria-labelledby="category-c" sx={{ pl: 2 }}>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-d"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category D
</Box>
<Box component="ul" aria-labelledby="category-d" sx={{ pl: 2 }}>
<li>Link 4.1</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</Box>
</Item>
</Grid>
</Grid>
<Grid
container
justifyContent="space-between"
alignItems="center"
flexDirection={{ xs: 'column', sm: 'row' }}
sx={{ fontSize: '12px' }}
size={12}
>
<Grid sx={{ order: { xs: 2, sm: 1 } }}>
<Item>© Copyright</Item>
</Grid>
<Grid container columnSpacing={1} sx={{ order: { xs: 1, sm: 2 } }}>
<Grid>
<Item>Link A</Item>
</Grid>
<Grid>
<Item>Link B</Item>
</Grid>
<Grid>
<Item>Link C</Item>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
);
}

109
docs/data/system/components/grid/NestedGrid.tsx Normal file
View File

@@ -0,0 +1,109 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
border: '1px solid',
borderColor: '#ced7e0',
borderRadius: '4px',
...theme.applyStyles('dark', {
borderColor: '#444d58',
}),
}));
export default function NestedGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid size={{ xs: 12, md: 5, lg: 4 }}>
<Item>Email subscribe section</Item>
</Grid>
<Grid container spacing={4} size={{ xs: 12, md: 7, lg: 8 }}>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-a"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category A
</Box>
<Box component="ul" aria-labelledby="category-a" sx={{ pl: 2 }}>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-b"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category B
</Box>
<Box component="ul" aria-labelledby="category-b" sx={{ pl: 2 }}>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-c"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category C
</Box>
<Box component="ul" aria-labelledby="category-c" sx={{ pl: 2 }}>
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</Box>
</Item>
</Grid>
<Grid size={{ xs: 6, lg: 3 }}>
<Item>
<Box
id="category-d"
sx={{ fontSize: '12px', textTransform: 'uppercase' }}
>
Category D
</Box>
<Box component="ul" aria-labelledby="category-d" sx={{ pl: 2 }}>
<li>Link 4.1</li>
<li>Link 4.2</li>
<li>Link 4.3</li>
</Box>
</Item>
</Grid>
</Grid>
<Grid
container
justifyContent="space-between"
alignItems="center"
flexDirection={{ xs: 'column', sm: 'row' }}
sx={{ fontSize: '12px' }}
size={12}
>
<Grid sx={{ order: { xs: 2, sm: 1 } }}>
<Item>© Copyright</Item>
</Grid>
<Grid container columnSpacing={1} sx={{ order: { xs: 1, sm: 2 } }}>
<Grid>
<Item>Link A</Item>
</Grid>
<Grid>
<Item>Link B</Item>
</Grid>
<Grid>
<Item>Link C</Item>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
);
}

34
docs/data/system/components/grid/OffsetGrid.js Normal file
View File

@@ -0,0 +1,34 @@
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function OffsetGrid() {
return (
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
<Item>1</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
<Item>2</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
<Item>3</Item>
</Grid>
<Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
<Item>4</Item>
</Grid>
</Grid>
);
}

34
docs/data/system/components/grid/OffsetGrid.tsx Normal file
View File

@@ -0,0 +1,34 @@
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function OffsetGrid() {
return (
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
<Item>1</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
<Item>2</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
<Item>3</Item>
</Grid>
<Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
<Item>4</Item>
</Grid>
</Grid>
);
}

14
docs/data/system/components/grid/OffsetGrid.tsx.preview Normal file
View File

@@ -0,0 +1,14 @@
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
<Item>1</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
<Item>2</Item>
</Grid>
<Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
<Item>3</Item>
</Grid>
<Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
<Item>4</Item>
</Grid>
</Grid>

30
docs/data/system/components/grid/ResponsiveGrid.js Normal file
View File

@@ -0,0 +1,30 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function ResponsiveGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid key={index} size={{ xs: 2, sm: 4 }}>
<Item>{index + 1}</Item>
</Grid>
))}
</Grid>
</Box>
);
}

30
docs/data/system/components/grid/ResponsiveGrid.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function ResponsiveGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid key={index} size={{ xs: 2, sm: 4 }}>
<Item>{index + 1}</Item>
</Grid>
))}
</Grid>
</Box>
);
}

7
docs/data/system/components/grid/ResponsiveGrid.tsx.preview Normal file
View File

@@ -0,0 +1,7 @@
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{Array.from(Array(6)).map((_, index) => (
<Grid key={index} size={{ xs: 2, sm: 4 }}>
<Item>{index + 1}</Item>
</Grid>
))}
</Grid>

37
docs/data/system/components/grid/RowAndColumnSpacing.js Normal file
View File

@@ -0,0 +1,37 @@
import styled from '@mui/system/styled';
import Grid from '@mui/system/Grid';
import Box from '@mui/system/Box';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function RowAndColumnSpacing() {
return (
<Box sx={{ width: '100%' }}>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid size={6}>
<Item>1</Item>
</Grid>
<Grid size={6}>
<Item>2</Item>
</Grid>
<Grid size={6}>
<Item>3</Item>
</Grid>
<Grid size={6}>
<Item>4</Item>
</Grid>
</Grid>
</Box>
);
}

37
docs/data/system/components/grid/RowAndColumnSpacing.tsx Normal file
View File

@@ -0,0 +1,37 @@
import styled from '@mui/system/styled';
import Grid from '@mui/system/Grid';
import Box from '@mui/system/Box';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function RowAndColumnSpacing() {
return (
<Box sx={{ width: '100%' }}>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid size={6}>
<Item>1</Item>
</Grid>
<Grid size={6}>
<Item>2</Item>
</Grid>
<Grid size={6}>
<Item>3</Item>
</Grid>
<Grid size={6}>
<Item>4</Item>
</Grid>
</Grid>
</Box>
);
}

14
docs/data/system/components/grid/RowAndColumnSpacing.tsx.preview Normal file
View File

@@ -0,0 +1,14 @@
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid size={6}>
<Item>1</Item>
</Grid>
<Grid size={6}>
<Item>2</Item>
</Grid>
<Grid size={6}>
<Item>3</Item>
</Grid>
<Grid size={6}>
<Item>4</Item>
</Grid>
</Grid>

72
docs/data/system/components/grid/SpacingGrid.js Normal file
View File

@@ -0,0 +1,72 @@
import * as React from 'react';
import Grid from '@mui/system/Grid';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
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 SpacingGrid() {
const [spacing, setSpacing] = React.useState(2);
const handleChange = (event) => {
setSpacing(Number(event.target.value));
};
const jsx = `
<Grid container spacing={${spacing}}>
`;
return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
<Grid size={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={(theme) => ({
height: 140,
width: 100,
backgroundColor: '#fff',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
})}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid size={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Grid>
</Grid>
);
}

72
docs/data/system/components/grid/SpacingGrid.tsx Normal file
View File

@@ -0,0 +1,72 @@
import * as React from 'react';
import Grid from '@mui/system/Grid';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
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 SpacingGrid() {
const [spacing, setSpacing] = React.useState(2);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSpacing(Number((event.target as HTMLInputElement).value));
};
const jsx = `
<Grid container spacing={${spacing}}>
`;
return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
<Grid size={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={(theme) => ({
height: 140,
width: 100,
backgroundColor: '#fff',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
}),
})}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid size={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Grid>
</Grid>
);
}

34
docs/data/system/components/grid/VariableWidthGrid.js Normal file
View File

@@ -0,0 +1,34 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function VariableWidthGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid size="auto">
<Item>size=auto</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
</Box>
);
}

34
docs/data/system/components/grid/VariableWidthGrid.tsx Normal file
View File

@@ -0,0 +1,34 @@
import Box from '@mui/system/Box';
import Grid from '@mui/system/Grid';
import styled from '@mui/system/styled';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
border: '1px solid',
borderColor: '#ced7e0',
padding: theme.spacing(1),
borderRadius: '4px',
textAlign: 'center',
...theme.applyStyles('dark', {
backgroundColor: '#1A2027',
borderColor: '#444d58',
}),
}));
export default function VariableWidthGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid size="auto">
<Item>size=auto</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
</Box>
);
}

11
docs/data/system/components/grid/VariableWidthGrid.tsx.preview Normal file
View File

@@ -0,0 +1,11 @@
<Grid container spacing={3}>
<Grid size="auto">
<Item>size=auto</Item>
</Grid>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>

158
docs/data/system/components/grid/grid.md Normal file
View File

@@ -0,0 +1,158 @@
---
productId: system
title: React Grid component
githubLabel: 'component: Grid'
---
# Grid
<p class="description">The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</p>
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
The `Grid` component works well for a layout with known columns. The columns can be configured in multiple breakpoints which you have to specify the column span of each child.
## How it works
The grid system is implemented with the `Grid` component:
- It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.
- The grid is always a flex item. Use the `container` prop to add flex container to it.
- Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
- There are five default grid breakpoints: xs, sm, md, lg, and xl. If you need custom breakpoints, check out [custom breakpoints grid](#custom-breakpoints).
- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/material-ui/customization/breakpoints/#default-breakpoints).
- It **does not** have the concept of rows. Meaning, you can't make the children span to multiple rows. If you need to do that, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) instead.
- It **does not** offer auto-placement children feature. It will try to fit the children one by one and if there is not enough space, the rest of the children will start on the next line and so on. If you need the auto-placement feature, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) instead.
:::warning
The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the Data Grid component](/x/react-data-grid/).
:::
## Fluid grids
Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.
### Basic grid
In order to create a grid layout, you need a container. Use `container` prop to create a grid container that wraps the grid items (the `Grid` is always an item).
Column widths are integer values between 1 and 12.
For example, an item with `size={6}` occupies half of the grid container's width.
{{"demo": "BasicGrid.js", "bg": true}}
### Multiple breakpoints
Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
For example, `size={{ xs: 12, sm: 6 }}` sizes a component to occupy half of the viewport width (6 columns) when viewport width is [600 or more pixels](/material-ui/customization/breakpoints/#default-breakpoints). For smaller viewports, the component fills all 12 available columns.
{{"demo": "FullWidthGrid.js", "bg": true}}
## Spacing
To control space between children, use the `spacing` prop.
The spacing value can be any positive number, including decimals and any string.
The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.
{{"demo": "SpacingGrid.js", "bg": true, "hideToolbar": true}}
### Row & column spacing
The `rowSpacing` and `columnSpacing` props allow for specifying the row and column gaps independently.
It's similar to the `row-gap` and `column-gap` properties of [CSS Grid](/system/grid/#row-gap-amp-column-gap).
{{"demo": "RowAndColumnSpacing.js", "bg": true}}
## Responsive values
You can switch the props' value based on the active breakpoint.
For instance, we can implement the [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design.
{{"demo": "ResponsiveGrid.js", "bg": true}}
Responsive values is supported by:
- `size`
- `columns`
- `columnSpacing`
- `direction`
- `rowSpacing`
- `spacing`
- `offset`
- all the [other props](#system-props) of MUI System
## Auto-layout
The Auto-layout makes the _items_ equitably share the available space.
That also means you can set the width of one _item_ and the others will automatically resize around it.
{{"demo": "AutoGrid.js", "bg": true}}
### Variable width content
Set one of the size breakpoint props to `"auto"` to size a column based on the width of its content.
{{"demo": "VariableWidthGrid.js", "bg": true}}
## Nested Grid
The grid container that renders inside another grid container is a nested grid which inherits the [`columns`](#columns) and [`spacing`](#spacing) from the top. The deep nested grid will inherit the props from the upper nested grid if it receives those props.
{{"demo": "NestedGrid.js", "bg": true}}
## Columns
You can change the default number of columns (12) with the `columns` prop.
{{"demo": "ColumnsGrid.js", "bg": true}}
## Offset
Move the item to the right by using the `offset` prop which can be:
- number, for example, `offset={{ md: 2 }}` - when used the item is moved to the right by 2 columns starts from `md` breakpoint and up.
- `"auto"` - when used, the item is moved to the right edge of the grid container.
{{"demo": "OffsetGrid.js", "bg": true}}
## Custom breakpoints
If you specify custom breakpoints to the theme, you can use those names as grid item props in responsive values.
{{"demo": "CustomBreakpointsGrid.js", "bg": true}}
:::info
Custom breakpoints affect all [responsive values](#responsive-values).
:::
### TypeScript
You have to set module augmentation on the theme breakpoints interface.
```ts
declare module '@mui/system' {
interface BreakpointOverrides {
// Your custom breakpoints
laptop: true;
tablet: true;
mobile: true;
desktop: true;
// Remove default breakpoints
xs: false;
sm: false;
md: false;
lg: false;
xl: false;
}
}
```
## Limitations
### direction column and column-reverse
The `size` and `offset` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
They define the number of grids the component will use for a given breakpoint. They are intended to control **width** using `flex-basis` in `row` containers but they will impact height in `column` containers.
If used, these props may have undesirable effects on the height of the `Grid` item elements.

25
docs/data/system/components/stack/BasicStack.js Normal file
View File

@@ -0,0 +1,25 @@
import Box from '@mui/system/Box';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function BasicStack() {
return (
<Box sx={{ width: '100%' }}>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
);
}

25
docs/data/system/components/stack/BasicStack.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Box from '@mui/system/Box';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function BasicStack() {
return (
<Box sx={{ width: '100%' }}>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Box>
);
}

5
docs/data/system/components/stack/BasicStack.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

24
docs/data/system/components/stack/DirectionStack.js Normal file
View File

@@ -0,0 +1,24 @@
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function DirectionStack() {
return (
<div>
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

24
docs/data/system/components/stack/DirectionStack.tsx Normal file
View File

@@ -0,0 +1,24 @@
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function DirectionStack() {
return (
<div>
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

5
docs/data/system/components/stack/DirectionStack.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Stack direction="row" spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

39
docs/data/system/components/stack/DividerStack.js Normal file
View File

@@ -0,0 +1,39 @@
import Box from '@mui/system/Box';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function DividerStack() {
return (
<div>
<Stack
direction="row"
divider={
<Box
component="hr"
sx={(theme) => ({
border: `1px solid ${'#fff'}`,
...theme.applyStyles('dark', {
border: `1px solid ${'#262B32'}`,
}),
})}
/>
}
spacing={2}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

39
docs/data/system/components/stack/DividerStack.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Box from '@mui/system/Box';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function DividerStack() {
return (
<div>
<Stack
direction="row"
divider={
<Box
component="hr"
sx={(theme) => ({
border: `1px solid ${'#fff'}`,
...theme.applyStyles('dark', {
border: `1px solid ${'#262B32'}`,
}),
})}
/>
}
spacing={2}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

31
docs/data/system/components/stack/FlexboxGapStack.js Normal file
View File

@@ -0,0 +1,31 @@
import Stack from '@mui/system/Stack';
import Box from '@mui/system/Box';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
flexGrow: 1,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function FlexboxGapStack() {
return (
<Box sx={{ width: 200 }}>
<Stack
spacing={{ xs: 1, sm: 2 }}
direction="row"
useFlexGap
sx={{ flexWrap: 'wrap' }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Long content</Item>
</Stack>
</Box>
);
}

31
docs/data/system/components/stack/FlexboxGapStack.tsx Normal file
View File

@@ -0,0 +1,31 @@
import Stack from '@mui/system/Stack';
import Box from '@mui/system/Box';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
flexGrow: 1,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function FlexboxGapStack() {
return (
<Box sx={{ width: 200 }}>
<Stack
spacing={{ xs: 1, sm: 2 }}
direction="row"
useFlexGap
sx={{ flexWrap: 'wrap' }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Long content</Item>
</Stack>
</Box>
);
}

10
docs/data/system/components/stack/FlexboxGapStack.tsx.preview Normal file
View File

@@ -0,0 +1,10 @@
<Stack
spacing={{ xs: 1, sm: 2 }}
direction="row"
useFlexGap
sx={{ flexWrap: 'wrap' }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Long content</Item>
</Stack>

199
docs/data/system/components/stack/InteractiveStack.js Normal file
View File

@@ -0,0 +1,199 @@
import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Grid from '@mui/system/Grid';
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function InteractiveStack() {
const [direction, setDirection] = React.useState('row');
const [justifyContent, setJustifyContent] = React.useState('center');
const [alignItems, setAlignItems] = React.useState('center');
const [spacing, setSpacing] = React.useState(2);
const jsx = `
<Stack
direction="${direction}"
spacing={${spacing}}
sx={{
justifyContent: "${justifyContent}",
alignItems: "${alignItems}",
}}
>
`;
return (
<Stack sx={{ flexGrow: 1 }}>
<Stack
direction={direction}
spacing={spacing}
sx={{ justifyContent, alignItems, height: 240 }}
>
{[0, 1, 2].map((value) => (
<Item key={value} sx={{ p: 2, pt: value + 1, pb: value + 1 }}>
{`Item ${value + 1}`}
</Item>
))}
</Stack>
<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">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 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">spacing</FormLabel>
<RadioGroup
row
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={(event) => {
setSpacing(Number(event.target.value));
}}
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Stack>
);
}

199
docs/data/system/components/stack/InteractiveStack.tsx Normal file
View File

@@ -0,0 +1,199 @@
import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import Paper from '@mui/material/Paper';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import Grid from '@mui/system/Grid';
import Stack, { StackProps } from '@mui/system/Stack';
import { styled } from '@mui/system';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function InteractiveStack() {
const [direction, setDirection] = React.useState<StackProps['direction']>('row');
const [justifyContent, setJustifyContent] = React.useState('center');
const [alignItems, setAlignItems] = React.useState('center');
const [spacing, setSpacing] = React.useState(2);
const jsx = `
<Stack
direction="${direction}"
spacing={${spacing}}
sx={{
justifyContent: "${justifyContent}",
alignItems: "${alignItems}",
}}
>
`;
return (
<Stack sx={{ flexGrow: 1 }}>
<Stack
direction={direction}
spacing={spacing}
sx={{ justifyContent, alignItems, height: 240 }}
>
{[0, 1, 2].map((value) => (
<Item key={value} sx={{ p: 2, pt: value + 1, pb: value + 1 }}>
{`Item ${value + 1}`}
</Item>
))}
</Stack>
<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 as StackProps['direction']);
}}
>
<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">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 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">spacing</FormLabel>
<RadioGroup
row
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setSpacing(Number((event.target as HTMLInputElement).value));
}}
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Stack>
);
}

27
docs/data/system/components/stack/ResponsiveStack.js Normal file
View File

@@ -0,0 +1,27 @@
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function ResponsiveStack() {
return (
<div>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

27
docs/data/system/components/stack/ResponsiveStack.tsx Normal file
View File

@@ -0,0 +1,27 @@
import Stack from '@mui/system/Stack';
import { styled } from '@mui/system';
const Item = styled('div')(({ theme }) => ({
backgroundColor: '#fff',
padding: theme.spacing(1),
textAlign: 'center',
borderRadius: 4,
...theme.applyStyles('dark', {
backgroundColor: '#262B32',
}),
}));
export default function ResponsiveStack() {
return (
<div>
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</div>
);
}

8
docs/data/system/components/stack/ResponsiveStack.tsx.preview Normal file
View File

@@ -0,0 +1,8 @@
<Stack
direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

133
docs/data/system/components/stack/stack.md Normal file
View File

@@ -0,0 +1,133 @@
---
productId: system
title: React Stack component
components: Stack
githubLabel: 'component: Stack'
---
# Stack
<p class="description">Stack is a container component for arranging elements vertically or horizontally.</p>
## Introduction
The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child.
:::info
Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ horizontal arrangement.
:::
{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
## Basics
```jsx
import Stack from '@mui/system/Stack';
```
The Stack component acts as a generic container, wrapping around the elements to be arranged.
Use the `spacing` prop to control the space between children.
The spacing value can be any number, including decimals, or a string.
(The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.)
{{"demo": "BasicStack.js", "bg": true}}
### Stack vs. Grid
`Stack` is concerned with one-dimensional layouts, while [Grid](/system/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically.
## Direction
By default, Stack arranges items vertically in a column.
Use the `direction` prop to position items horizontally in a row:
{{"demo": "DirectionStack.js", "bg": true}}
## Dividers
Use the `divider` prop to insert an element between each child, as shown below:
{{"demo": "DividerStack.js", "bg": true}}
## Responsive values
You can switch the `direction` or `spacing` values based on the active breakpoint.
{{"demo": "ResponsiveStack.js", "bg": true}}
## Flexbox gap
To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap) for the spacing implementation, set the `useFlexGap` prop to true.
It removes the [known limitations](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers.
We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it.
{{"demo": "FlexboxGapStack.js", "bg": true}}
## Interactive demo
Below is an interactive demo that lets you explore the visual results of the different settings:
{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}}
## System props
:::info
System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead.
```diff
- <Stack mt={2} />
+ <Stack sx={{ mt: 2 }} />
```
:::
## Limitations
### Margin on the children
Customizing the margin on the children is not supported by default.
For instance, the top-margin on the `button` component below will be ignored.
```jsx
<Stack>
<button style={{ marginTop: '30px' }}>...</button>
</Stack>
```
:::success
To overcome this limitation, set [`useFlexGap`](#flexbox-gap) prop to true to switch to CSS flexbox gap implementation.
You can learn more about this limitation by visiting this [RFC](https://github.com/mui/material-ui/issues/33754).
:::
### white-space: nowrap
The initial setting on flex items is `min-width: auto`.
This causes a positioning conflict when children use `white-space: nowrap;`.
You can reproduce the issue with:
```jsx
<Stack direction="row">
<span style={{ whiteSpace: 'nowrap' }}>
```
In order for the item to stay within the container you need to set `min-width: 0`.
```jsx
<Stack direction="row" sx={{ minWidth: 0 }}>
<span style={{ whiteSpace: 'nowrap' }}>
```
## Anatomy
The Stack component is composed of a single root `<div>` element:
```html
<div class="MuiStack-root">
<!-- Stack contents -->
</div>
```

52
docs/data/system/display/Block.js Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Block() {
return (
<div style={{ width: '100%' }}>
<Box
component="span"
sx={(theme) => ({
display: 'block',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
block
</Box>
<Box
component="span"
sx={(theme) => ({
display: 'block',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
block
</Box>
</div>
);
}

52
docs/data/system/display/Block.tsx Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Block() {
return (
<div style={{ width: '100%' }}>
<Box
component="span"
sx={(theme) => ({
display: 'block',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
block
</Box>
<Box
component="span"
sx={(theme) => ({
display: 'block',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
block
</Box>
</div>
);
}

28
docs/data/system/display/Hiding.js Normal file
View File

@@ -0,0 +1,28 @@
import Box from '@mui/material/Box';
export default function Hiding() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: { xs: 'block', md: 'none' },
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
hide on screens wider than md
</Box>
<Box
sx={{
display: { xs: 'none', md: 'block' },
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
hide on screens smaller than md
</Box>
</div>
);
}

28
docs/data/system/display/Hiding.tsx Normal file
View File

@@ -0,0 +1,28 @@
import Box from '@mui/material/Box';
export default function Hiding() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: { xs: 'block', md: 'none' },
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
hide on screens wider than md
</Box>
<Box
sx={{
display: { xs: 'none', md: 'block' },
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
hide on screens smaller than md
</Box>
</div>
);
}

52
docs/data/system/display/Inline.js Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Inline() {
return (
<div style={{ width: '100%' }}>
<Box
component="div"
sx={(theme) => ({
display: 'inline',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
inline
</Box>
<Box
component="div"
sx={(theme) => ({
display: 'inline',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
inline
</Box>
</div>
);
}

52
docs/data/system/display/Inline.tsx Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Inline() {
return (
<div style={{ width: '100%' }}>
<Box
component="div"
sx={(theme) => ({
display: 'inline',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
inline
</Box>
<Box
component="div"
sx={(theme) => ({
display: 'inline',
p: 1,
m: 1,
bgcolor: '#fff',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
inline
</Box>
</div>
);
}

52
docs/data/system/display/Overflow.js Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Overflow() {
return (
<div style={{ width: 200, whiteSpace: 'nowrap' }}>
<Box
component="div"
sx={(theme) => ({
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Not scrollable, overflow is hidden
</Box>
<Box
component="div"
sx={(theme) => ({
overflow: 'auto',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Try scrolling this overflow auto box
</Box>
</div>
);
}

52
docs/data/system/display/Overflow.tsx Normal file
View File

@@ -0,0 +1,52 @@
import Box from '@mui/material/Box';
export default function Overflow() {
return (
<div style={{ width: 200, whiteSpace: 'nowrap' }}>
<Box
component="div"
sx={(theme) => ({
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Not scrollable, overflow is hidden
</Box>
<Box
component="div"
sx={(theme) => ({
overflow: 'auto',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Try scrolling this overflow auto box
</Box>
</div>
);
}

30
docs/data/system/display/Print.js Normal file
View File

@@ -0,0 +1,30 @@
import Box from '@mui/material/Box';
export default function Print() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'block',
displayPrint: 'none',
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
Screen Only (Hide on print only)
</Box>
<Box
sx={{
display: 'none',
displayPrint: 'block',
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
Print Only (Hide on screen only)
</Box>
</div>
);
}

30
docs/data/system/display/Print.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Box from '@mui/material/Box';
export default function Print() {
return (
<div style={{ width: '100%' }}>
<Box
sx={{
display: 'block',
displayPrint: 'none',
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
Screen Only (Hide on print only)
</Box>
<Box
sx={{
display: 'none',
displayPrint: 'block',
m: 1,
fontSize: '0.875rem',
fontWeight: '700',
}}
>
Print Only (Hide on screen only)
</Box>
</div>
);
}

54
docs/data/system/display/TextOverflow.js Normal file
View File

@@ -0,0 +1,54 @@
import Box from '@mui/material/Box';
export default function TextOverflow() {
return (
<div style={{ width: 200, whiteSpace: 'nowrap' }}>
<Box
component="div"
sx={(theme) => ({
textOverflow: 'clip',
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum is simply dummy text
</Box>
<Box
component="div"
sx={(theme) => ({
textOverflow: 'ellipsis',
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum is simply dummy text
</Box>
</div>
);
}

54
docs/data/system/display/TextOverflow.tsx Normal file
View File

@@ -0,0 +1,54 @@
import Box from '@mui/material/Box';
export default function TextOverflow() {
return (
<div style={{ width: 200, whiteSpace: 'nowrap' }}>
<Box
component="div"
sx={(theme) => ({
textOverflow: 'clip',
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum is simply dummy text
</Box>
<Box
component="div"
sx={(theme) => ({
textOverflow: 'ellipsis',
overflow: 'hidden',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum is simply dummy text
</Box>
</div>
);
}

36
docs/data/system/display/Visibility.js Normal file
View File

@@ -0,0 +1,36 @@
import Box from '@mui/material/Box';
export default function Visibility() {
return (
<div style={{ width: '100%' }}>
<Box
component="span"
sx={(theme) => ({
visibility: 'visible',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Visible container
</Box>
<Box
component="span"
sx={{ visibility: 'hidden', p: 1, m: 1, bgcolor: 'background.paper' }}
>
Invisible container
</Box>
</div>
);
}

36
docs/data/system/display/Visibility.tsx Normal file
View File

@@ -0,0 +1,36 @@
import Box from '@mui/material/Box';
export default function Visibility() {
return (
<div style={{ width: '100%' }}>
<Box
component="span"
sx={(theme) => ({
visibility: 'visible',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Visible container
</Box>
<Box
component="span"
sx={{ visibility: 'hidden', p: 1, m: 1, bgcolor: 'background.paper' }}
>
Invisible container
</Box>
</div>
);
}

55
docs/data/system/display/WhiteSpace.js Normal file
View File

@@ -0,0 +1,55 @@
import Box from '@mui/material/Box';
export default function WhiteSpace() {
return (
<div style={{ width: 200 }}>
<Box
component="div"
sx={(theme) => ({
whiteSpace: 'nowrap',
overflowX: 'auto',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
1500s.
</Box>
<Box
component="div"
sx={(theme) => ({
whiteSpace: 'normal',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
1500s.
</Box>
</div>
);
}

55
docs/data/system/display/WhiteSpace.tsx Normal file
View File

@@ -0,0 +1,55 @@
import Box from '@mui/material/Box';
export default function WhiteSpace() {
return (
<div style={{ width: 200 }}>
<Box
component="div"
sx={(theme) => ({
whiteSpace: 'nowrap',
overflowX: 'auto',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
1500s.
</Box>
<Box
component="div"
sx={(theme) => ({
whiteSpace: 'normal',
my: 2,
p: 1,
bgcolor: 'grey.100',
color: 'grey.800',
border: '1px solid',
borderColor: 'grey.300',
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
...theme.applyStyles('dark', {
bgcolor: '#101010',
color: 'grey.300',
borderColor: 'grey.800',
}),
})}
>
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
1500s.
</Box>
</div>
);
}

132
docs/data/system/display/display.md Normal file
View File

@@ -0,0 +1,132 @@
# Display
<p class="description">Quickly and responsively toggle the display, overflow, visibility, and more with the display utilities.</p>
## Examples
### Inline
{{"demo": "Inline.js", "defaultCodeOpen": false, "bg": true}}
```jsx
<Box component="div" sx={{ display: 'inline' }}>inline</Box>
<Box component="div" sx={{ display: 'inline' }}>inline</Box>
```
### Block
{{"demo": "Block.js", "defaultCodeOpen": false, "bg": true}}
```jsx
<Box component="span" sx={{ display: 'block' }}>block</Box>
<Box component="span" sx={{ display: 'block' }}>block</Box>
```
## Hiding elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
| Screen Size | Class |
| :----------------- | :----------------------------------------------------------- |
| Hidden on all | `sx={{ display: 'none' }}` |
| Hidden only on xs | `sx={{ display: { xs: 'none', sm: 'block' } }}` |
| Hidden only on sm | `sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }}` |
| Hidden only on md | `sx={{ display: { xs: 'block', md: 'none', lg: 'block' } }}` |
| Hidden only on lg | `sx={{ display: { xs: 'block', lg: 'none', xl: 'block' } }}` |
| Hidden only on xl | `sx={{ display: { xs: 'block', xl: 'none' } }}` |
| Visible only on xs | `sx={{ display: { xs: 'block', sm: 'none' } }}` |
| Visible only on sm | `sx={{ display: { xs: 'none', sm: 'block', md: 'none' } }}` |
| Visible only on md | `sx={{ display: { xs: 'none', md: 'block', lg: 'none' } }}` |
| Visible only on lg | `sx={{ display: { xs: 'none', lg: 'block', xl: 'none' } }}` |
| Visible only on xl | `sx={{ display: { xs: 'none', xl: 'block' } }}` |
{{"demo": "Hiding.js", "defaultCodeOpen": false}}
```jsx
<Box sx={{ display: { xs: 'block', md: 'none' }}}>
hide on screens wider than md
</Box>
<Box sx={{ display: { xs: 'none', md: 'block' }}}>
hide on screens smaller than md
</Box>
```
## Display in print
{{"demo": "Print.js", "defaultCodeOpen": false}}
```jsx
<Box sx={{ display: 'block', displayPrint: 'none' }}>
Screen Only (Hide on print only)
</Box>
<Box sx={{ display: 'none', displayPrint: 'block' }}>
Print Only (Hide on screen only)
</Box>
```
## Overflow
{{"demo": "Overflow.js", "defaultCodeOpen": false}}
```jsx
<Box component="div" sx={{ overflow: 'hidden' }}>
Not scrollable, overflow is hidden
</Box>
<Box component="div" sx={{ overflow: 'auto' }}>
Try scrolling this overflow auto box
</Box>
```
## Text overflow
{{"demo": "TextOverflow.js", "defaultCodeOpen": false}}
```jsx
<Box component="div" sx={{ textOverflow: 'clip' }}>
Lorem Ipsum is simply dummy text
</Box>
<Box component="div" sx={{ textOverflow: 'ellipsis' }}>
Lorem Ipsum is simply dummy text
</Box>
```
## Visibility
{{"demo": "Visibility.js", "defaultCodeOpen": false}}
```jsx
<Box component="div" sx={{ visibility: 'visible' }}>
Visible container
</Box>
<Box component="div" sx={{ visibility: 'hidden' }}>
Invisible container
</Box>
```
## White space
{{"demo": "WhiteSpace.js", "defaultCodeOpen": false}}
```jsx
<Box component="div" sx={{ whiteSpace: 'nowrap' }}>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>
<Box component="div" sx={{ whiteSpace: 'normal' }}>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</Box>
```
## API
```js
import { display } from '@mui/system';
```
| Import name | Prop | CSS property | Theme key |
| :------------- | :------------- | :-------------- | :-------- |
| `displayPrint` | `displayPrint` | `display` | none |
| `displayRaw` | `display` | `display` | none |
| `overflow` | `overflow` | `overflow` | none |
| `textOverflow` | `textOverflow` | `text-overflow` | none |
| `visibility` | `visibility` | `visibility` | none |
| `whiteSpace` | `whiteSpace` | `white-space` | none |

32
docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js Normal file
View File

@@ -0,0 +1,32 @@
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { createTheme, ThemeProvider } from '@mui/material/styles';
// Retain type safety.
const theme = createTheme({
unstable_sxConfig: {
// You can now use the borderRadius key in sx
// by providing direct values from the palette
borderRadius: {
themeKey: 'shape',
},
},
shape: {
sm: 4,
md: 8,
lg: 12,
},
});
export default function ChangeTheBehaviorSxProp() {
return (
<Stack direction="row" sx={{ gap: 1 }}>
<ThemeProvider theme={theme}>
<Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
</ThemeProvider>
</Stack>
);
}

39
docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { createTheme, ThemeProvider } from '@mui/material/styles';
// Retain type safety.
declare module '@mui/system' {
interface Shape {
sm: number;
md: number;
lg: number;
}
}
const theme = createTheme({
unstable_sxConfig: {
// You can now use the borderRadius key in sx
// by providing direct values from the palette
borderRadius: {
themeKey: 'shape',
},
},
shape: {
sm: 4,
md: 8,
lg: 12,
},
});
export default function ChangeTheBehaviorSxProp() {
return (
<Stack direction="row" sx={{ gap: 1 }}>
<ThemeProvider theme={theme}>
<Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
</ThemeProvider>
</Stack>
);
}

5
docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<ThemeProvider theme={theme}>
<Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
<Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
</ThemeProvider>

32
docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js Normal file
View File

@@ -0,0 +1,32 @@
import { Box, handleBreakpoints } from '@mui/system';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const customTheme = createTheme({
unstable_sxConfig: {
size: {
style: (props) => {
const { size, theme } = props;
const styleFromPropValue = (propValueFinal) => {
const value = theme.spacing(propValueFinal);
return {
width: value,
height: value,
};
};
// Adding support for the breakpoints syntax
return handleBreakpoints(props, size, styleFromPropValue);
},
},
},
});
export default function ExtendTheSxProp() {
return (
<ThemeProvider theme={customTheme}>
<Box sx={{ size: 10, border: 1 }} />
</ThemeProvider>
);
}

32
docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { Box, handleBreakpoints } from '@mui/system';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const customTheme = createTheme({
unstable_sxConfig: {
size: {
style: (props) => {
const { size, theme } = props;
const styleFromPropValue = (propValueFinal: number) => {
const value = theme.spacing(propValueFinal);
return {
width: value,
height: value,
};
};
// Adding support for the breakpoints syntax
return handleBreakpoints(props, size, styleFromPropValue);
},
},
},
});
export default function ExtendTheSxProp() {
return (
<ThemeProvider theme={customTheme}>
<Box sx={{ size: 10, border: 1 }} />
</ThemeProvider>
);
}

Some files were not shown because too many files have changed in this diff Show More