0.0.4

Space 间距 ​

虽然已有 分割线，但有时仅靠分割线仍不足以拉开多个元素间距；若层层叠加分割线，代码会显得臃肿且难以维护。间距组件在保持排版整洁的同时，统一控制子元素间距。

基础用法 ​

最常见的用法是为子组件之间提供统一间距。

使用 Space 包裹子节点以设置间距。

Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

垂直排列 ​

通过 direction 控制排列方向，内部使用 flex-direction 实现。

支持纵向排列。

Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

控制间距大小 ​

通过 size 控制间距。

内置尺寸 small、default、large 分别约对应 8px、12px、16px；默认 small 即 8px。

也可传入数字自定义间距，见下一节。

Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

自定义间距 ​

当内置尺寸不满足需求时，可传入数字类型自定义子项间距。

Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

TIP

不要将 USpace 与依赖祖先宽度（或高度）的组件（例如 USlider）组合使用：拖拽滑块时轨道宽度变化会导致光标与拖拽柄错位。

自动换行 ​

横向布局时，可用布尔类型的 wrap 控制是否自动换行。

使用 wrap 控制换行。

间隔元素 ​

除空白外，有时需要更灵活的间隔，可使用 spacer。

字面量间隔 ​

|

间隔可为 VNode ​

对齐 ​

设置 alignment 可调整子节点对齐方式，取值含义见 align-items。

使用 alignment。

string
header
body
string
header
body
string
header
body

充满容器 ​

通过布尔类型的 fill 控制子节点是否自动拉伸以充满容器。

下例中开启 fill 后，子项宽度会随容器变化。

使用 fill 让子项充满容器。

fill:
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

也可使用 fillRatio 自定义拉伸比例，默认 100 表示按父容器宽度的 100% 分配。

横向与纵向布局下表现略有差异，效果见示例。

使用 fillRatio 自定义比例。

direction:
fillRatio:
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4
Card name
List item 1
List item 2
List item 3
List item 4

间距 API ​

间距 属性 ​

名称说明类型默认值
alignment子项对齐方式enum align-itemscenter
classclassNamestring / object / array—
direction排列方向enumhorizontal
prefix-cls子项 class 前缀string—
style额外样式string / object—
spacer间隔元素string / number / VNode—
size间距大小enum / number / arraysmall
wrap是否自动换行booleanfalse
fill子项是否拉伸充满容器booleanfalse
fill-ratio拉伸比例number100

间距 插槽 ​

名称说明
default需要设置间距的子节点