这叫啥 UI？
← 返回组件目录

COMPONENT 67 · Content & Media

分隔线

Divider

也叫SeparatorRuleHairline分割线

用细线或留白分开相邻内容组，帮助扫描结构。

Separates adjacent content groups with a line or spacing cue.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 分隔线
  • 前一内容组
  • 后一内容组

适合使用

  • 相邻内容需要视觉分组但不值得增加标题或容器时。

不建议使用

  • 每个项目都加线会造成噪声，或分组关系已足够清楚时。

键盘与无障碍

  • 有主题分隔含义时使用 hr；纯装饰线对辅助技术隐藏，不能替代必要标题。

DESCRIBE IT TO AI

这样告诉编程助手

实现分隔线（Divider）：用细线或留白分开相邻内容组，帮助扫描结构。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<section class="demo stack">
  <div>
    <strong>账户设置</strong>
    <p class="muted">管理个人资料与登录方式。</p>
  </div>
  <hr>
  <div class="row">
    <span>通知</span>
    <span class="muted">已开启</span>
  </div>
  <div class="row">
    <span>隐私</span>
    <span class="muted">仅自己</span>
  </div>
</section>