Layout 布局

介绍

提供了 row 和 col 两个组件来进行行列布局。

基础用法

通过在 Col 上添加 span 属性设置列所占的宽度百分比。

<vd-row>
  <vd-col span="12">span：12</vd-col>
  <vd-col span="12">span：12</vd-col>
</vd-row>

<vd-row>
  <vd-col span="8">span：8</vd-col>
  <vd-col span="8">span：8</vd-col>
  <vd-col span="8">span：8</vd-col>
</vd-row>

设置列间距

<vd-row gutter="20">
  <vd-col span="8">span：8</vd-col>
  <vd-col span="8">span：8</vd-col>
  <vd-col span="8">span：8</vd-col>
</vd-row>

分栏偏移

添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。

<vd-row>
  <vd-col span="6">span：6</vd-col>
  <vd-col span="8" offset="4">span：8 offset：4</vd-col>
</vd-row>

对其方式

通过 justify 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 justify-content 属性。

<vd-row justify="center">
  <vd-col span="6">span：6</vd-col>
  <vd-col span="6">span：6</vd-col>
  <vd-col span="6">span：6</vd-col>
</vd-row>

<vd-row justify="space-between">
  <vd-col span="6">span：6</vd-col>
  <vd-col span="6">span：6</vd-col>
  <vd-col span="6">span：6</vd-col>
</vd-row>

API

Row Props

参数	说明	类型	默认值
gutter	列元素之间的间距	string | number	-
justify	主轴对齐方式	RowJustify	'start'
align	交叉轴对齐方式	RowAlign	'top'
wrap	是否自动换行	boolean	false

Col Props

参数	说明	类型	默认值
span	列元素宽度	string | number	-
offset	列元素偏移距离	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Row Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Col Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Row Slots

名称	说明
default	自定义内容

Col Slots

名称	说明
default	自定义内容

类型定义

组件导出以下类型定义：

import type { RowJustify, RowAlign } from 'vital-design';