Space

用于在两个元素之间插入一段空白间隔。

方向#

通常,我们建议在 Stack 这种布局组件中使用这个 Space 组件,因为当其被放置在布局组件中时,它会自动根据布局方向调整自己的样式(水平/垂直):

当然,你也可以不将其放在布局组件中,此时你可以通过设置 direction 属性来控制它的方向:

但正如上例中所示,因为它是一个块级元素组件,其兄弟元素位于其上下方而不是左右,所以仅是将其改为垂直空隔符并没有任何意义,你同时还需要使用 flex、grid 或其它布局方式来控制空隔符及其兄弟元素的位置。

尺寸#

该组件丧心病狂地提供了 9 个空隔符的尺寸:

当然,如果上面这些都不是你想要的,那么可以通过设置 --nami-space--size 变量来自定义需要的尺寸:

.my-divider {
--nami-space--size: 20px;
}