组件功能

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 盒子