Col 列布局

2026-04-30   访问量:1001


Col 是竖直方向布局容器,是 Box 组件的快捷方式,direction 固定为 "col"。

它用于在竖直方向排列子组件,并支持弹性布局、间距、对齐、边框和背景等样式配置。

基础用法

Template 示例:

<Col gap="8px">  <Title value="标题" size="md" />  <Text value="描述文本" /></Col>

效果展示如下:



属性说明

Col 的属性与 Box 盒子 完全一致,唯一区别是 direction 固定为 col"。

布局属性

属性名

类型

描述

默认值

children

ChatKitComponent[]

子组件列表

-

align

Alignment

交叉轴对齐方式

-

justify

Justification

主轴对齐方式

-

wrap

"nowrap" | "wrap" | "wrap-reverse"

换行方式

"nowrap"

flex

number | string

Flex 值

-

gap

number | string

子元素间距

-

padding

number | string | Spacing

内边距

-

border

number | Border | Borders

边框配置

-

background

string | ThemeColor

背景颜色

-

尺寸属性

属性名

类型

描述

默认值

height

number | string

高度

-

width

number | string

宽度

-

size

number | string

同时设置宽高

-

minHeight

number | string

最小高度

-

minWidth

number | string

最小宽度

-

minSize

number | string

最小尺寸

-

maxHeight

number | string

最大高度

-

maxWidth

number | string

最大宽度

-

maxSize

number | string

最大尺寸

-

aspectRatio

number | string

宽高比

-

radius

RadiusValue

圆角

-

margin

number | string | Spacing

外边距

-

详细的类型定义请参见 Box 盒子


热门文章
更多>