zent
Version:
一套前端设计语言和基于React的实现
79 lines (58 loc) • 2.99 kB
Markdown
---
title: Layout
path: component/layout
group: Others
---
## Layout
- `flex` based 24 column grid layout component
- `Row` and `Col` must be within a `Grid`
- Configurable gutter for rows and columns
- Responsive
### Dependencies
⚠️ Note: The responsive ability relies on [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and `matchMedia.addListener`. It is user's responsibility to make sure these functions
are available, especially for legacy browsers. Polyfills to consider:
- [Paul Irish/Scott Jehl's matchMedia polyfill](https://github.com/paulirish/matchMedia.js)
- [David Knight's media-match polyfill](https://github.com/weblinc/media-match)
### API
#### Grid
| Property | Description | Type | Required |
| --------- | ----------------- | -------- | -------- |
| className | Custom class name | `string` | No |
#### Row
| Property | Description | Type | Required | Default | Alternative |
| --------- | -------------------- | -------- | -------- | ------- | ------------------------------------------------------------ |
| justify | Horizontal alignment | `string` | No | `start` | `end` `center` `space-around` `space-between` `space-evenly` |
| align | Vertical alignment | `string` | No | `top` | `middle` `bottom` |
| className | Custom class name | `string` | No | | |
#### Col
| Property | Description | Type | Required | Default |
| --------- | ----------------------------------- | -------------------------- | -------- | ------- |
| span | Number of cells to occupy | `number | ResponsiveValue` | Yes | |
| offset | Number of cells to offset from left | `number | ResponsiveValue` | No | 0 |
| order | Cell flex order | `number | ResponsiveValue` | No | |
| className | Custom class name | `string` | No | |
#### ConfigProvider
Default config is `{ rowGutter: 0, colGutter: 0 }`.
| Property | Description | Type | Required |
| -------- | ------------------ | -------------- | -------- |
| value | Grid configuration | `LayoutConfig` | Yes |
#### ResponsiveValue
```typescript
interface ResponsiveValue {
// Fallback value when no breakpoint is matched
fallback: number;
// Breakpoints from bootstrap 4
xs?: number; // width <576px
sm?: number; // width ≥576px
md?: number; // width ≥768px
lg?: number; // width ≥992px
xl?: number; // width ≥1200px
// These breakpoints are not in bootstrap
xxl?: number; // width ≥1600px;
fhd?: number; // width ≥1920px;
}
interface LayoutConfig {
colGutter?: number | ResponsiveValue;
rowGutter?: number | ResponsiveValue;
}
```