Skip to content

col 布局规则

TIP

所有组件均支持布局配置规则,详细说明可参考

naive-ui 栅格布局 Col props

自定义表单的布局

配置方式

在 FormCreate 中,可以通过 rule.col 配置项来设置组件的布局规则。Naive UI 使用 24 栅格系统,默认 span: 24,即每个组件占满整行。

配置参数

名称类型默认值说明
spannumber24栅格占位格数
offsetnumber0栅格左侧的间隔格数
pushnumber0栅格向右移动格数
pullnumber0栅格向左移动格数

布局示例

基础布局

单列布局(默认)

两列布局

三列布局

偏移布局

使用 offset 设置左侧偏移

使用 push 向右移动

使用 pull 向左移动

使用 Row 和 Col 组件配合布局

除了使用 rule.col 配置项外,还可以使用 rowcol 组件来手动控制布局。

基础用法

多行布局

提示

  • 使用 rowcol 组件时,需要设置 native: true 来原样生成组件
  • Naive UI 使用 24 栅格系统
  • 可以通过 rowprops 设置相关属性

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用