Space 间距组件
用于快速组织同级内容的水平/垂直间距布局,统一复用主题系统的 8px 栅格变量。size 支持主题 token、自定义数值、CSS 长度字符串和 [horizontal, vertical] 元组,适合操作栏、表单组合区和响应式换行布局。
align 未传时会采用方向感知默认值:horizontal 默认 center,vertical 默认 start。
基础水平布局
垂直布局
五档间距
自定义间距
对齐方式
换行布局
结合 Button 布局
结合 Input + Button 布局
接口说明
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | 主轴方向,控制子项的水平或垂直排列方式。 |
align | 'start' | 'center' | 'end' | 'baseline' | horizontal => 'center' / vertical => 'start' | 交叉轴对齐方式。 |
wrap | boolean | false | 是否允许子项自动换行。 |
size | SpaceGapValue | [SpaceGapValue, SpaceGapValue] | 'sm' | 间距大小,支持主题 token、数值、CSS 长度字符串,以及 [horizontal, vertical] 元组。 |
类型
ts
type SpaceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type SpaceGapValue = SpaceSize | number | string插槽
| 名称 | 类型 | 说明 |
|---|---|---|
default | () => VNode[] | 需要参与间距布局的子节点内容。 |