2020-08-13 11:47:56 +08:00
|
|
|
# GridContainer <small>栅格容器</small>
|
|
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
`GridContainer` 组件需要配合 [`GridRow`](./grid-row) 及 [`GridColumn`](./grid-column) 组件使用。
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 默认栅格
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 定宽栅格
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``columns`` | `number=` | `gridcontainer.columns` | 栅格列数。 |
|
|
|
|
|
| ``margin`` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
|
|
|
|
|
| ``gutter`` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
|
|
|
|
|
| ``width`` | `number=` | - | 当需要创建定宽布局时，用来传入容器宽度 `px` 数值。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``default`` | 布局内容，直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
### 全局配置
|
|
|
|
|
|
|
|
|
|
| 配置项 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``gridcontainer.columns`` | `number` | `12` | 栅格列数。 |
|
|
|
|
|
| ``gridcontainer.gutter`` | `number` | `30` | 栅格列间距 `px` 数值。 |
|
|
|
|
|
| ``gridcontainer.margin`` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
#### `veui-theme-dls` 中的默认配置
|
|
|
|
|
|
|
|
|
|
| 配置项 | 类型 | 默认值 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| `gridcontainer.columns` | `number` | `24` |
|
|
|
|
|
| `gridcontainer.gutter` | `number` | `20` |
|
|
|
|
|
| `gridcontainer.margin` | `number` | `20` |
|
