组件功能

通用布局容器组件（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：左侧边框配置。