间隔 Space
为多个排列在一起的元素添加间隔。
基础使用
让元素们不要贴在一起。
Submit this order?
隐藏源代码
间隔大小
通过 margin 属性设置间隔大小，支持 small、medium、large，也可以自定义数值或对象。
Small
Medium
Large
16px
x: 8px, y: 4px
隐藏源代码
排列方向
通过 direction 属性设置排列方向，支持 horizontal 和 vertical。
Horizontal
Vertical
隐藏源代码
主轴排列
Space 的 justify 属性设置主轴排列方式。
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Space Between
Content
Content
Content
Content
Space Around
Content
Content
Content
Content
Space Evenly
Content
Content
Content
Content
隐藏源代码
交叉轴排列
Space 的 align 属性设置交叉轴排列方式。
Center
Content
Content
Content
Content
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Stretch
Content
Content
Content
Content
隐藏源代码
API
SpaceProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| margin | 'small' | 'medium' | 'large' | number | { x?: number; y?: number } | 是 | 'medium' | 间隔大小，也可以是数值或对象。 | 0.0.0-beta |
| direction | 'horizontal' | 'vertical' | 是 | 'horizontal' | 间隔排列方向。 | 0.0.0-beta |
| justify | 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 是 | 'start' | 主轴排列方式，基于 CSS justify-content 属性。 | 0.0.0-beta |
| align | 'start' | 'center' | 'end' | 'stretch' | 是 | | 交叉轴排列方式，基于 CSS align-items 属性。direction 为 'horizontal' 时默认为 'center'，为 'vertical' 时默认为 'stretch'。 | 0.0.0-beta |
| wrap | boolean | 是 | true | 是否自动换行。 | 0.0.0-beta |
| inline | boolean | 是 | false | 是否为行内布局。 | 0.0.0-beta |
SpaceSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | Space 的内容。 | 0.0.0-beta |