产品动态
产品公告
Box 盒子
组件功能
通用布局容器组件（Box），用于对内容进行灵活排布与样式组织。
该组件支持弹性布局方向控制、对齐方式、间距、尺寸、边框及背景等通用样式能力，适合作为页面结构与局部布局的基础容器使用。
基础用法
通过 direction 与 children 定义子组件的排列方式，gap 用于控制子元素之间的间距。
Template 示例：
<Box direction="col" gap="12px"><Text value="内容1" /><Text value="内容2" /></Box>
效果展示如下：
属性说明
布局属性
属性名 | 类型 | 描述 | 默认值 |
direction | "row" | "col" | 布局方向 | "row" |
children | ChatKitComponent[] | 子组件列表 | - |
align | Alignment | 交叉轴对齐方式 | - |
justify | Justification | 主轴对齐方式 | - |
wrap | "nowrap" | "wrap" | "wrap-reverse" | 换行方式 | "nowrap" |
flex | number | string | 弹性伸缩比例 | - |
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 | 外边距 | - |
类型定义
Alignment
用于控制子组件在交叉轴方向上的对齐规则，交叉轴方向由 direction 决定：
当 direction = "row" 时，交叉轴为纵向。
当 direction = "col" 时，交叉轴为横向。
可选值如下：
"start" | "center" | "end" | "baseline" | "stretch"可选值说明如下：
"start"：子组件在交叉轴起始位置对齐。
"center"：子组件在交叉轴居中对齐。
"end"：子组件在交叉轴结束位置对齐。
"baseline"：子组件按文本基线对齐，常用于包含文本的横向布局。
"stretch"：子组件在交叉轴方向拉伸，占满可用空间。
Justification
用于控制子组件在主轴方向上的分布和对齐方式，主轴方向由 direction 决定：
当 direction = "row" 时，主轴为横向。
当 direction = "col" 时，主轴为纵向。
可选值如下：
"start" | "end" | "center" | "between" | "around" | "evenly"可选值说明如下：
"start"：子组件从主轴起始位置依次排列。
"end"：子组件整体向主轴末端对齐。
"center"：子组件整体在主轴方向居中。
"between"：首尾贴边，其余子组件等间距分布。
"around"：子组件两侧保留等量空间。
"evenly"：子组件及两侧空隙完全等分。
RadiusValue
用于定义组件的圆角大小，支持语义化预设值与自定义值。
可选值如下：
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | string可选值说明如下：
"2xs" ～ "3xl"：由小到大的圆角预设值。
"full"：完全圆角，常用于圆形或胶囊形元素。
string：自定义圆角值，如 "4px"、"50%"。
Spacing
用于描述内边距（padding）或间距类属性的配置方式。
支持以下三种形式：
number | string | { x?: number; y?: number; top?: number; right?: number; bottom?: number; left?: number }说明如下：
number | string：四个方向使用相同的间距值。
x / y：分别控制水平方向与垂直方向的间距。
top / right / bottom / left：分别控制单个方向的间距。
Border
用于配置组件整体边框样式。
支持以下字段：
{ size?: number; color?: string; style?: "solid" | "dashed" | "dotted" }字段说明如下：
size：边框宽度。
color：边框颜色。
style：边框样式类型。
Borders
用于分别配置组件四个方向的边框样式。
支持以下字段：
{ top?: Border; right?: Border; bottom?: Border; left?: Border }字段说明如下：
top：顶部边框配置。
right：右侧边框配置。
bottom：底部边框配置。
left：左侧边框配置。
文档反馈