zent
Version:
一套前端设计语言和基于React的实现
79 lines (58 loc) • 2.79 kB
Markdown
---
title: Layout
subtitle: 布局
path: component/layout
group: 其他
---
## Layout 布局
- 基于 `flex` 的 24 栅格布局组件
- `Row` 和 `Col` 必须包裹在 `Grid` 内部
- 可配置的行、列间隔
- 支持响应式
### 依赖
⚠️ 注意：响应式能力依赖 [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 以及 `matchMedia.addListener`。如果需要支持较老的浏览器，使用是请确保引入相应的 polyfill。
- [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
| 属性 | 说明 | 类型 | 是否必填 | 默认值 |
| --------- | ---------- | -------- | -------- | ------ |
| className | 自定义类名 | `string` | 否 | |
#### Row
| 属性 | 说明 | 类型 | 是否必填 | 默认值 | 备选值 |
| --------- | ------------ | -------- | -------- | ------- | --------------------------------------------- |
| justify | 水平排列方式 | `string` | 否 | `start` | `end` `center` `space-around` `space-between` |
| align | 垂直对齐方式 | `string` | 否 | `top` | `middle` `bottom` |
| className | 额外的样式名 | `string` | 否 | | |
#### Col
| 属性 | 说明 | 类型 | 是否必填 | 默认值 |
| --------- | -------------- | -------------------------- | -------- | ------ |
| span | 所占的栅格数 | `number | ResponsiveValue` | 是 | |
| offset | 左偏移的栅格数 | `number | ResponsiveValue` | 否 | 0 |
| order | 栅格顺序 | `number | ResponsiveValue` | 否 | |
| className | 额外的样式名 | `string` | 否 | |
#### ConfigProvider
默认的配置是 `{ rowGutter: 0, colGutter: 0 }`。
| 属性 | 说明 | 类型 | 是否必填 |
| ----- | -------- | -------------- | -------- |
| value | 栅格配置 | `LayoutConfig` | 是 |
#### ResponsiveValue
```typescript
interface ResponsiveValue {
// 未匹配到相应式值时候的默认值
fallback: number;
// 以下响应式断点同 bootstrap 4
xs?: number; // width <576px
sm?: number; // width ≥576px
md?: number; // width ≥768px
lg?: number; // width ≥992px
xl?: number; // width ≥1200px
// 以下断点 bootstrap 中不存在
xxl?: number; // width ≥1600px
fhd?: number; // width ≥1920px
}
interface LayoutConfig {
colGutter?: number | ResponsiveValue;
rowGutter?: number | ResponsiveValue;
}
```