49 lines
1.4 KiB
Markdown
49 lines
1.4 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
### 属性
|
||
|
|
|
||
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
||
|
|
| -- | -- | -- | -- |
|
||
|
|
| `columns` | `number=` | `gridcontainer.columns` | 栅格列数。 |
|
||
|
|
| `margin` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
|
||
|
|
| `gutter` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
|
||
|
|
| `width` | `number=` | - | 当需要创建定宽布局时，用来传入容器宽度 `px` 数值。 |
|
||
|
|
|
||
|
|
### 插槽
|
||
|
|
|
||
|
|
| 名称 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `default` | 布局内容，直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
|
||
|
|
|
||
|
|
### 全局配置
|
||
|
|
|
||
|
|
| 配置项 | 类型 | 默认值 | 描述 |
|
||
|
|
| -- | -- | -- | -- |
|
||
|
|
| `gridcontainer.columns` | `number` | `12` | 栅格列数。 |
|
||
|
|
| `gridcontainer.gutter` | `number` | `30` | 栅格列间距 `px` 数值。 |
|
||
|
|
| `gridcontainer.margin` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
|
||
|
|
|
||
|
|
#### `veui-theme-dls` 中的默认配置
|
||
|
|
|
||
|
|
| 配置项 | 类型 | 默认值 |
|
||
|
|
| -- | -- | -- | -- |
|
||
|
|
| `gridcontainer.columns` | `number` | `24` |
|
||
|
|
| `gridcontainer.gutter` | `number` | `20` |
|
||
|
|
| `gridcontainer.margin` | `number` | `20` |
|