col 布局规则
配置方式
在 FormCreate 中,可以通过 rule.col 配置项来设置组件的布局规则。Naive UI 使用 24 栅格系统,默认 span: 24,即每个组件占满整行。
配置参数
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| span | number | 24 | 栅格占位格数 |
| offset | number | 0 | 栅格左侧的间隔格数 |
| push | number | 0 | 栅格向右移动格数 |
| pull | number | 0 | 栅格向左移动格数 |
布局示例
基础布局
单列布局(默认)
两列布局
三列布局
偏移布局
使用 offset 设置左侧偏移
使用 push 向右移动
使用 pull 向左移动
使用 Row 和 Col 组件配合布局
除了使用 rule.col 配置项外,还可以使用 row 和 col 组件来手动控制布局。
基础用法
多行布局
提示
- 使用
row和col组件时,需要设置native: true来原样生成组件 - Naive UI 使用 24 栅格系统
- 可以通过
row的props设置相关属性


