dotsharp

Divider 分隔线 ​

1px 的分隔线，用 --ds-border 画线，把列表项、卡片内容或工具栏按钮分组。

  • 默认水平：占满父容器宽度，两端贴边。
  • vertical：宽度 1px，在 flex 容器里用 self-stretch 撑满父级高度。父级不是 flex 时请自行给高度。
  • inset：start / end / both，水平线对应左 / 右留白，垂直线对应上 / 下留白，间距 16px。

水平分隔 ​

收件箱
已发送
草稿
vue
<div>
  <div>收件箱</div>
  <Divider />
  <div>已发送</div>
  <Divider />
  <div>草稿</div>
</div>

水平分隔线在块级流里自动占满宽度；放进 flex 布局时也保持 self-stretch，不会被拉伸成多条线。

两端留白 ​

inset 控制线的起点：start 只留左端，end 只留右端，both 两端都留，适合与带图标的列表项对齐。

inset="start"
对齐缩进的内容
对齐缩进的内容
inset="both"
两端都留白
两端都留白
vue
<div>
  <div>对齐缩进的内容</div>
  <Divider inset="start" />
  <div>对齐缩进的内容</div>
</div>

<div>
  <div>两端都留白</div>
  <Divider inset="both" />
  <div>两端都留白</div>
</div>

垂直分隔 ​

工具栏、按钮组或一行元信息之间用垂直线。它依赖父级 flex 的高度（items-stretch 或默认的 stretch）。

撤销重做另存为
vue
<div class="flex h-12 items-center gap-4">
  <span>撤销</span>
  <Divider vertical />
  <span>重做</span>
  <Divider vertical />
  <span>另存为</span>
</div>

垂直线的 inset="both" 会在上下各留 16px；父级没有固定高度时，线至少保留 16px 高度。

API ​

属性类型默认值说明
verticalbooleanfalse垂直分隔线
inset"none" | "start" | "end" | "both""none"两端留白，固定 16px
  • 水平渲染为 <hr>，垂直渲染为 role="separator" 的 <div>；两者都带 aria-orientation。
  • 根元素无默认外边距（组件库不带 preflight），因此可以在任何上下文中直接使用。
  • 其余属性与事件透传到根元素，可用 class 调整间距（例如 class="my-4"）。

可访问性 ​

分隔线带 role="separator"，读屏会把它读作内容分组而不是普通装饰；纯视觉分隔若不需要被读到， 可以自行加 aria-hidden="true"。