74 lines
2.9 KiB
Markdown
74 lines
2.9 KiB
Markdown
|
# Sizing
|
||
|
|
|
||
|
|
<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
|
||
|
|
|
||
|
|
## Supported values
|
||
|
|
|
||
|
|
The sizing properties: `width`, `height`, `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` are using the following custom transform function for the value:
|
||
|
|
|
||
|
|
```js
|
||
|
|
function transform(value) {
|
||
|
|
return value <= 1 && value !== 0 ? `${value * 100}%` : value;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
If the value is between (0, 1], it's converted to percent.
|
||
|
|
Otherwise, it is directly set on the CSS property.
|
||
|
|
|
||
|
|
{{"demo": "Values.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ width: 1/4 }}> // Equivalent to width: '25%'
|
||
|
|
<Box sx={{ width: 300 }}> // Numbers are converted to pixel values.
|
||
|
|
<Box sx={{ width: '75%' }}> // String values are used as raw CSS.
|
||
|
|
<Box sx={{ width: 1 }}> // 100%
|
||
|
|
```
|
||
|
|
|
||
|
|
## Width
|
||
|
|
|
||
|
|
{{"demo": "Width.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ width: '25%' }}>…
|
||
|
|
<Box sx={{ width: '50%' }}>…
|
||
|
|
<Box sx={{ width: '75%' }}>…
|
||
|
|
<Box sx={{ width: '100%' }}>…
|
||
|
|
<Box sx={{ width: 'auto' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
### Max-width
|
||
|
|
|
||
|
|
The max-width property allows setting a constraint on your breakpoints.
|
||
|
|
In this example, the value resolves to [`theme.breakpoints.values.md`](/material-ui/customization/default-theme/?expand-path=$.breakpoints.values).
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ maxWidth: 'md' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
## Height
|
||
|
|
|
||
|
|
{{"demo": "Height.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ height: '25%' }}>…
|
||
|
|
<Box sx={{ height: '50%' }}>…
|
||
|
|
<Box sx={{ height: '75%' }}>…
|
||
|
|
<Box sx={{ height: '100%' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { sizing } from '@mui/system';
|
||
|
|
```
|
||
|
|
|
||
|
|
| Import name | Prop | CSS property | Theme key |
|
||
|
|
| :---------- | :---------- | :----------- | :------------------------------------------------------------------------------------------------------- |
|
||
|
|
| `width` | `width` | `width` | none |
|
||
|
|
| `maxWidth` | `maxWidth` | `max-width` | [`theme.breakpoints.values`](/material-ui/customization/default-theme/?expand-path=$.breakpoints.values) |
|
||
|
|
| `minWidth` | `minWidth` | `min-width` | none |
|
||
|
|
| `height` | `height` | `height` | none |
|
||
|
|
| `maxHeight` | `maxHeight` | `max-height` | none |
|
||
|
|
| `minHeight` | `minHeight` | `min-height` | none |
|
||
|
|
| `boxSizing` | `boxSizing` | `box-sizing` | none |
|