Skip to content
CONTENTS

Space 间距

虽然我们拥有 Divider 组件,但很多时候我们需要不是一个被 Divider 组件分割开的页面结构,因此我们会重复的使用很多的 Divider 组件,这在我们的开发效率上造成了一定的困扰。间距组件就是为了解决这种困扰应运而生的。

基础用法

最基础的用法,通过这个组件来给组件之间提供统一的间距。

垂直布局

默认水平布局方式,我们也提供垂直布局的方式。用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制。

inline 元素

可以通过 inline 属性设置 Space 组件的容器类型,inline 表示容器表现为行内元素,默认时容器表现为块级元素

自定义 Size

很多时候,内建的大小不满足设计师的要求,我们可以通过传入自己定义的大小 (数值类型) 来设置。size 值是一个长度为 1 或 2 的数组,长度为 1 时,数组元素是左右上下的间距(即左右间距和上下间距相同);长度为 2 时,数组元素依次是左右,上下的间距。

自动换行

在水平布局模式下, 通过控制 wrap(布尔类型)来控制是否自动换行

对齐方式

设置 alignment 可以调整所有子节点在容器内的对齐方式,可设置的值与 align-items 一致,即 stretchcenterflex-startflex-endbaselineinitialinherit

API

属性

参数说明类型可选值默认值
inline容器是否为 inline 元素booleantrue / falsefalse
direction排列的方向stringvertical / horizontalhorizontal
size间隔大小array[row, col] / [all][10, 10]
wrap设置是否自动换行booleantrue / falsefalse
alignment所有子节点在容器内部侧轴方向上的对齐方式stringstretch / center / flex-start / flex-end / baseline / initial / inheritcenter

Released under the MIT License.