跳转到正文

Space 间距组件

用于快速组织同级内容的水平/垂直间距布局,统一复用主题系统的 8px 栅格变量。size 支持主题 token、自定义数值、CSS 长度字符串和 [horizontal, vertical] 元组,适合操作栏、表单组合区和响应式换行布局。

align 未传时会采用方向感知默认值:horizontal 默认 centervertical 默认 start

基础水平布局

垂直布局

五档间距

自定义间距

对齐方式

换行布局

结合 Button 布局

结合 Input + Button 布局

接口说明

属性

名称类型默认值说明
direction'horizontal' | 'vertical''horizontal'主轴方向,控制子项的水平或垂直排列方式。
align'start' | 'center' | 'end' | 'baseline'horizontal => 'center' / vertical => 'start'交叉轴对齐方式。
wrapbooleanfalse是否允许子项自动换行。
sizeSpaceGapValue | [SpaceGapValue, SpaceGapValue]'sm'间距大小,支持主题 token、数值、CSS 长度字符串,以及 [horizontal, vertical] 元组。

类型

ts
type SpaceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type SpaceGapValue = SpaceSize | number | string

插槽

名称类型说明
default() => VNode[]需要参与间距布局的子节点内容。

基于 MIT 协议开源发布。