Divider

用于在两个元素之间插入一条分隔线。

方向#

通常建议在 Stack 布局组件中使用 Divider，当其被放置在布局组件中时，它将会自动根据布局方向调整自己的样式（水平/垂直）：

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

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

当作为水平分隔线时，其长度为 100%，而作为垂直分隔线时，则变为 1em + 2px，如果这个长度不是你需要的，那么可以通过 CSS 变量来更改它：

.my-divider {
  --nami-divider--length: 20px;
}

注意，当在 Stack 组件中，且其 align 置为默认值 stretch 时，受些影响，分隔符的长度将与容器交叉轴的长度相同，此时单独将其 align 置为其它值即可：

你可以通过设置 CSS 变量来改变分隔线的颜色：

.my-divider {
  --nami-divider--background: #f5222d;
}