移动端导航分割线

分割线Divider

在内容之间画一条细分隔线；带文字时用于分区标题

通用 规格 8 · 分割线 Divider 6 端实现 触摸优先

引入（H5 原生；其余 5 端见「快速开始」）
<!-- ① 令牌：PC 令牌 + 移动端 --kole-m-* 合成单文件，引一次 -->
<link rel="stylesheet" href="kole-ui/mobile/tokens.css">

<!-- ② 本组件样式（全量则用 kole-ui/mobile/components/index.css） -->
<link rel="stylesheet" href="kole-ui/mobile/components/mobile-divider.css">

<!-- ③ 结构照抄下方任一演示块（类名与 6 端实现一致） -->

演示

每个演示都是真实渲染：预览帧加载 frameworks-mobile/Divider.html?demo=<id>（只显示该演示块），代码是该演示块在演示页里的原文，可复制。全部演示同屏可看 演示页 ↗。

01 组件类型

基础用法orientation=horizontal

一条 1px 的水平分隔线。

查看代码（演示页原文 · 8 行）
frameworks-mobile/Divider.html · basic
<section class="demo-block" data-demo="basic">
  <p class="demo-label">基础用法（水平 1px）</p>
  <div class="demo-box">
    <p class="demo-text" style="padding-top: var(--kole-space-12)">上一段内容</p>
    <div class="kole-m-divider" role="separator" aria-hidden="true" data-assert="divider-basic"></div>
    <p class="demo-text">下一段内容</p>
  </div>
</section>
带文字（居中）align=center

文字两侧各一条线，用作分区标题。

查看代码（演示页原文 · 8 行）
frameworks-mobile/Divider.html · text-center
<section class="demo-block" data-demo="text-center">
  <p class="demo-label">带文字（align=center，文字两侧各一条线）</p>
  <div class="demo-box">
    <div class="kole-m-divider kole-m-divider--text kole-m-divider--center" role="separator" data-assert="divider-text-center">
      <span class="kole-m-divider__text">2026-09-20</span>
    </div>
  </div>
</section>
文字对齐align=left | right

左/右对齐时另一侧的线自然变长。

查看代码（演示页原文 · 11 行）
frameworks-mobile/Divider.html · align
<section class="demo-block" data-demo="align">
  <p class="demo-label">文字对齐（align=left / right：short 侧收到 0，文字贴边）</p>
  <div class="demo-box">
    <div class="kole-m-divider kole-m-divider--text kole-m-divider--left" role="separator" data-assert="divider-align-left">
      <span class="kole-m-divider__text">左对齐分组</span>
    </div>
    <div class="kole-m-divider kole-m-divider--text kole-m-divider--right" role="separator" data-assert="divider-align-right">
      <span class="kole-m-divider__text">右对齐分组</span>
    </div>
  </div>
</section>

02 组件状态

垂直分割线orientation=vertical

行内并列元素之间用垂直分割线，高度跟随父容器。

查看代码（演示页原文 · 12 行）
frameworks-mobile/Divider.html · vertical
<section class="demo-block" data-demo="vertical">
  <p class="demo-label">垂直分割线（orientation=vertical，高度跟随父容器）</p>
  <div class="demo-box" style="padding-top: var(--kole-space-16)">
    <div class="demo-row" data-assert="divider-vertical">
      <span>已发货</span>
      <div class="kole-m-divider kole-m-divider--vertical" role="separator" aria-hidden="true"></div>
      <span>顺丰标快</span>
      <div class="kole-m-divider kole-m-divider--vertical" role="separator" aria-hidden="true"></div>
      <span>预计 09-22 送达</span>
    </div>
  </div>
</section>
虚线dashed=true

虚线用于弱分隔（如「没有更多了」）。

查看代码（演示页原文 · 7 行）
frameworks-mobile/Divider.html · dashed
<section class="demo-block" data-demo="dashed">
  <p class="demo-label">虚线（dashed=true：弱分隔，如「没有更多了」）</p>
  <div class="demo-box">
    <div class="kole-m-divider kole-m-divider--dashed" role="separator" aria-hidden="true" data-assert="divider-dashed"></div>
    <p class="demo-text" style="text-align: center; padding-top: var(--kole-space-12)">没有更多了</p>
  </div>
</section>

API

props / events / slots 为 6 端实现的公共接口（说明文字取自规格对应小节）。字段名与各端源码逐名核对：node tools/verify-mobile-docs.mjs

Props

名称类型默认值说明必传
orientation'horizontal' | 'vertical''horizontal'变体 orientation（规格 §8.3）N
align'left' | 'center' | 'right''center'变体 align：带文字时的对齐方式（规格 §8.3）N
dashedbooleanfalse变体 dashed：虚线（规格 §8.3）N

「必传」按严格定义：实现里**没有默认值**时才为 Y（本门禁逐条核对 props 与各端源码的默认值，防止契约与实现脱节）。

事件

名称参数说明

插槽

名称说明
default可选文字，居中或左/右对齐（规格 §8.2）

CSS 变量

组件级变量（在组件样式表里定义）。业务侧可在自己的作用域内覆盖，不必改组件源码。

名称默认值说明
本组件没有组件级 CSS 变量

何时使用

  • 在内容之间画一条细分隔线；带文字时用于分区标题
  • 纯静态，不参与点击与手势
  • 垂直分割线高度跟随父容器（用 align-self: stretch）
  • 纯装饰：role=separator + aria-hidden=true（对读屏无信息量）

交互与触控

  • 纯静态，不参与点击与手势
  • 垂直分割线高度跟随父容器（用 align-self: stretch）

无障碍

  • 纯装饰：role="separator" + aria-hidden="true"（对读屏无信息量）
  • 带文字的分割线不隐藏，文字本身即语义

从「该用哪一个」的角度区分；PC 端的对应实现见 PC 文档站。

组件何时用它而不是本组件
单元格Cell单元格自带行间分隔线，列表里不需要再插分割线
单元格Cell列表单元格自带内容分隔；独立内容区之间才使用分割线

规格未定 / 禁止发明

类别条目
禁止发明主题化分割线（渐变、图片）的表现
规格未定垂直分割线的推荐间距

结构（anatomy）

字段说明
divider根元素，水平时为 1px 高
text可选文字，居中或左/右对齐
line文字两侧的线

变体维度与类名映射

类名映射由构建脚本从契约 variantClasses 生成，并被 verify:mobile-docs 逐条对照组件 CSS 校验（类/变量必须真实存在）。

维度取值对应类名 / 变量
orientationhorizontal / vertical
horizontal （由数据驱动，无专属类）
vertical .kole-m-divider--vertical
alignleft / center / right
left .kole-m-divider--left
center .kole-m-divider--center
right .kole-m-divider--right
dashedfalse / true
false （由数据驱动，无专属类）
true .kole-m-divider--dashed

代表变体

变体标签
orientation=horizontal · align=center水平分割线
orientation=horizontal · align=left带文字（左对齐）
orientation=horizontal · align=center带文字（居中）
orientation=vertical · align=center垂直分割线

用到的令牌

构建时从本组件样式表扫描得出。蓝色为移动端自有令牌，绿色为继承的 PC 令牌（改一处两端生效）。

--kole-m-font-size-label --kole-color-border --kole-color-text-secondary --kole-space-12 --kole-space-8

6 端源码

同一组件的六份实现（生产环境的类名与结构一致，差异只在技术栈写法与单位）。点开查看，右侧可复制。

frameworks-mobile/Divider.css · 纯样式（CSS） · 70 行
frameworks-mobile/Divider.css
/* Kole UI Mobile · Divider 样式 — 对齐移动端规格 §8
   分割线：纯静态（不参与点击与手势）；水平 1px，垂直跟随父容器高度；
   带文字时线由 ::before/::after 承担，对齐方式由 --left/--center/--right 决定。 */

.kole-m-divider {
  box-sizing: border-box;
  display: block;
  height: 1px;
  margin: var(--kole-space-8) 0;
  border: 0;
  background: var(--kole-color-border);
}

/* 变体 dashed：虚线（弱分隔） */
.kole-m-divider--dashed {
  height: 0;
  background: none;
  border-top: 1px dashed var(--kole-color-border);
}

/* 带文字：变成一行「线 + 文字 + 线」 */
.kole-m-divider--text {
  display: flex;
  align-items: center;
  gap: var(--kole-space-8);
  height: auto;
  margin: var(--kole-space-12) 0;
  background: none;
  color: var(--kole-color-text-secondary);
  font-family: inherit;
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
}

.kole-m-divider--text::before,
.kole-m-divider--text::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--kole-color-border);
}

.kole-m-divider--text.kole-m-divider--dashed::before,
.kole-m-divider--text.kole-m-divider--dashed::after {
  background: none;
  border-top: 1px dashed var(--kole-color-border);
  height: 0;
}

/* 变体 align：文字两侧线的分配（左/右对齐时把短边收到 16px） */
.kole-m-divider--center::before,
.kole-m-divider--center::after { flex: 1 1 auto; }
.kole-m-divider--left::before { content: none; }
.kole-m-divider--left::after { flex: 1 1 auto; }
.kole-m-divider--right::after { content: none; }
.kole-m-divider--right::before { flex: 1 1 auto; }

/* 变体 orientation=vertical：跟随父容器高度 */
.kole-m-divider--vertical {
  display: inline-block;
  width: 1px;
  height: auto;
  min-height: 1em;
  align-self: stretch;
  margin: 0 var(--kole-space-8);
  background: var(--kole-color-border);
}

.kole-m-divider__text { flex: 0 0 auto; }
frameworks-mobile/Divider.html · H5 原生（无框架） · 96 行
frameworks-mobile/Divider.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Kole UI Mobile · Divider（H5）</title>
<link rel="stylesheet" href="../.design_library/kole-ui-mobile/colors_and_type.css">
<link rel="stylesheet" href="Divider.css">
<style>
  body { margin: 0; background: var(--kole-color-page-bg); font-family: var(--kole-font-family); color: var(--kole-color-text-body); }
  .demo { max-width: 375px; margin: 0 auto; padding: var(--kole-m-gutter) 0; }
  .demo-label { margin: 0; padding: var(--kole-space-12) var(--kole-m-gutter) var(--kole-space-8);
    font-size: var(--kole-m-font-size-label); color: var(--kole-color-text-secondary); }
  .demo-box { padding: 0 var(--kole-m-gutter) var(--kole-space-16); background: var(--kole-color-card-bg);
    border-block: 1px solid var(--kole-color-border); }
  .demo-text { margin: 0; font-size: var(--kole-m-font-size-label); color: var(--kole-color-text-secondary); }
  .demo-row { display: flex; align-items: center; gap: var(--kole-space-8); font-size: var(--kole-m-font-size-label); }
  .demo-block[hidden] { display: none; }
</style>
</head>
<body>
<div class="demo">
  <section class="demo-block" data-demo="basic">
    <p class="demo-label">基础用法（水平 1px）</p>
    <div class="demo-box">
      <p class="demo-text" style="padding-top: var(--kole-space-12)">上一段内容</p>
      <div class="kole-m-divider" role="separator" aria-hidden="true" data-assert="divider-basic"></div>
      <p class="demo-text">下一段内容</p>
    </div>
  </section>

  <section class="demo-block" data-demo="text-center">
    <p class="demo-label">带文字（align=center，文字两侧各一条线）</p>
    <div class="demo-box">
      <div class="kole-m-divider kole-m-divider--text kole-m-divider--center" role="separator" data-assert="divider-text-center">
        <span class="kole-m-divider__text">2026-09-20</span>
      </div>
    </div>
  </section>

  <section class="demo-block" data-demo="align">
    <p class="demo-label">文字对齐（align=left / right：short 侧收到 0，文字贴边）</p>
    <div class="demo-box">
      <div class="kole-m-divider kole-m-divider--text kole-m-divider--left" role="separator" data-assert="divider-align-left">
        <span class="kole-m-divider__text">左对齐分组</span>
      </div>
      <div class="kole-m-divider kole-m-divider--text kole-m-divider--right" role="separator" data-assert="divider-align-right">
        <span class="kole-m-divider__text">右对齐分组</span>
      </div>
    </div>
  </section>

  <section class="demo-block" data-demo="vertical">
    <p class="demo-label">垂直分割线（orientation=vertical，高度跟随父容器）</p>
    <div class="demo-box" style="padding-top: var(--kole-space-16)">
      <div class="demo-row" data-assert="divider-vertical">
        <span>已发货</span>
        <div class="kole-m-divider kole-m-divider--vertical" role="separator" aria-hidden="true"></div>
        <span>顺丰标快</span>
        <div class="kole-m-divider kole-m-divider--vertical" role="separator" aria-hidden="true"></div>
        <span>预计 09-22 送达</span>
      </div>
    </div>
  </section>

  <section class="demo-block" data-demo="dashed">
    <p class="demo-label">虚线（dashed=true：弱分隔，如「没有更多了」）</p>
    <div class="demo-box">
      <div class="kole-m-divider kole-m-divider--dashed" role="separator" aria-hidden="true" data-assert="divider-dashed"></div>
      <p class="demo-text" style="text-align: center; padding-top: var(--kole-space-12)">没有更多了</p>
    </div>
  </section>
</div>
<script>
  /* ?demo=<id> → 只显示该演示块（文档站按块预览用；无参数时全部显示，测试与回归走无参数路径） */
  (function () {
    var id = new URLSearchParams(location.search).get('demo');
    if (!id) return;
    var blocks = Array.prototype.slice.call(document.querySelectorAll('.demo-block'));
    var hit = false;
    blocks.forEach(function (b) {
      var on = b.getAttribute('data-demo') === id;
      if (on) hit = true;
      b.hidden = !on;
    });
    if (!hit) { blocks.forEach(function (b) { b.hidden = false; }); return; }
    document.body.classList.add('demo-single');
    blocks.forEach(function (b) {
      var label = b.querySelector('.demo-label');
      if (label && !b.hidden) label.hidden = true;
    });
  })();
</script>
</body>
</html>
frameworks-mobile/Divider.jsx · React · 26 行
frameworks-mobile/Divider.jsx
import React from 'react';
import './Divider.css';

/* 分割线（移动端）— 规格 §8；纯装饰（role=separator + aria-hidden），带文字时不隐藏 */
export default function Divider({
  orientation = 'horizontal',
  align = 'center',
  dashed = false,
  children = null,
}) {
  const withText = !!children;
  const cls =
    'kole-m-divider' +
    (withText ? ' kole-m-divider--text' : '') +
    ` kole-m-divider--${align}` +
    (dashed ? ' kole-m-divider--dashed' : '') +
    (orientation === 'vertical' ? ' kole-m-divider--vertical' : '');

  /* 纯装饰的分割线对读屏无信息量 → aria-hidden；带文字时文字本身即语义 */
  return (
    <div className={cls} role="separator" aria-hidden={withText ? undefined : 'true'}>
      {withText ? <span className="kole-m-divider__text">{children}</span> : null}
    </div>
  );
}
frameworks-mobile/Divider.vue2.vue · Vue 2 · 37 行
frameworks-mobile/Divider.vue2.vue
<template>
  <div
    class="kole-m-divider"
    :class="dividerClass"
    role="separator"
    :aria-hidden="hasText ? null : 'true'"
  >
    <span v-if="hasText" class="kole-m-divider__text"><slot>分割线</slot></span>
  </div>
</template>

<script>
export default {
  name: 'KoleMDivider',
  props: {
    orientation: { type: String, default: 'horizontal' },
    align: { type: String, default: 'center' },
    dashed: { type: Boolean, default: false }
  },
  computed: {
    hasText: function () {
      return !!(this.$slots.default && this.$slots.default.length);
    },
    dividerClass: function () {
      return [
        this.orientation === 'vertical' ? 'kole-m-divider--vertical' : '',
        this.hasText ? 'kole-m-divider--text' : '',
        'kole-m-divider--' + this.align,
        this.dashed ? 'kole-m-divider--dashed' : ''
      ].filter(Boolean);
    }
  }
};
</script>

<style src="./Divider.css"></style>
frameworks-mobile/Divider.vue3.vue · Vue 3 · 32 行
frameworks-mobile/Divider.vue3.vue
<template>
  <div
    class="kole-m-divider"
    :class="dividerClass"
    role="separator"
    :aria-hidden="hasText ? null : 'true'"
  >
    <span v-if="hasText" class="kole-m-divider__text"><slot>分割线</slot></span>
  </div>
</template>

<script setup>
import { computed, useSlots } from 'vue';

const props = defineProps({
  orientation: { type: String, default: 'horizontal' },
  align: { type: String, default: 'center' },
  dashed: { type: Boolean, default: false }
});

const slots = useSlots();
const hasText = computed(() => !!slots.default);
const dividerClass = computed(() => [
  props.orientation === 'vertical' ? 'kole-m-divider--vertical' : '',
  hasText.value ? 'kole-m-divider--text' : '',
  `kole-m-divider--${props.align}`,
  props.dashed ? 'kole-m-divider--dashed' : ''
].filter(Boolean));
</script>

<style src="./Divider.css"></style>
frameworks-mobile/Divider.uniapp.vue · uni-app（跨端：小程序 / App / H5） · 80 行
frameworks-mobile/Divider.uniapp.vue
<template>
  <view class="kole-m-divider" :class="dividerClass">
    <text v-if="hasText" class="kole-m-divider__text"><slot>分割线</slot></text>
  </view>
</template>

<script setup>
/* uni-app 端 · 分割线（移动端）— 规格 §8
   跨端差异：用 view / text 结构，尺寸用 rpx（2rpx ≈ 1px）；带文字时两侧的线仍用
   ::before / ::after（H5 / App / 微信小程序三端均支持伪元素），只有 :focus 一类
   交互态不需要——分割线是纯静态组件。 */
import { computed, useSlots } from 'vue';

const props = defineProps({
  orientation: { type: String, default: 'horizontal' },
  align: { type: String, default: 'center' },
  dashed: { type: Boolean, default: false }
});

const slots = useSlots();
const hasText = computed(() => !!slots.default);
const dividerClass = computed(() => [
  props.orientation === 'vertical' ? 'kole-m-divider--vertical' : '',
  hasText.value ? 'kole-m-divider--text' : '',
  `kole-m-divider--${props.align}`,
  props.dashed ? 'kole-m-divider--dashed' : ''
].filter(Boolean));
</script>

<style>
/* rpx 化的移动端令牌（与其它 uni-app 端组件同一写法）：静态组件也要引令牌层，
   否则「只抄了 PC 令牌」——门禁 U8 会拦。 */
.kole-m-divider {
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  display: flex;
  align-items: center;
  background-color: var(--kole-color-border);
  height: 2rpx;
}

.kole-m-divider--text {
  background-color: transparent;
  height: auto;
  padding: 24rpx 0;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

/* 带文字时两侧的线用真实子元素（三端一致，不依赖伪元素） */
.kole-m-divider--text::before,
.kole-m-divider--text::after {
  content: '';
  flex: 1;
  height: 2rpx;
  background-color: var(--kole-color-border);
}

.kole-m-divider--dashed::before,
.kole-m-divider--dashed::after,
.kole-m-divider--dashed {
  background-color: transparent;
  border-top: 2rpx dashed var(--kole-color-border);
}

.kole-m-divider--left::before { content: none; }
.kole-m-divider--right::after { content: none; }

.kole-m-divider--vertical {
  width: 2rpx;
  height: auto;
  min-height: 1em;
  align-self: stretch;
  margin: 0 16rpx;
  background-color: var(--kole-color-border);
}

.kole-m-divider__text { flex-shrink: 0; padding: 0 16rpx; }
</style>

测试与回归

断言在真实的 375×640 设备帧里跑（引擎与 PC 侧共用 tests/_runtime.js，触控行为动词来自移动端 tests/mobile/_behaviors.js）。

断言 16 条 · 全部通过 报告 2026-09-20 16:50:33

复现命令
node site/dev-server.js &
REG_BASE=http://127.0.0.1:3311 node tools/run-mobile-regression.mjs   # 全量 5 个组件
npm run verify:mobile-docs                                           # 本页内容完整性 + API 与源码一致性

设计契约

components/mobile-divider.json（点击展开原始 JSON） 
{
  "schemaVersion": 1,
  "sourceKind": "authored-spec",
  "provenance": "authored-in-repo",
  "specFile": "spec/移动端规格.md",
  "confidence": "high",
  "specSection": "8 · 分割线 Divider",
  "slug": "mobile-divider",
  "name": "分割线 Divider",
  "semanticTypeCandidates": [
    "divider",
    "separator"
  ],
  "variantDimensions": [
    {
      "name": "orientation",
      "values": [
        "horizontal",
        "vertical"
      ]
    },
    {
      "name": "align",
      "values": [
        "left",
        "center",
        "right"
      ]
    },
    {
      "name": "dashed",
      "values": [
        "false",
        "true"
      ]
    }
  ],
  "representativeVariants": [
    {
      "orientation": "horizontal",
      "align": "center",
      "label": "水平分割线"
    },
    {
      "orientation": "horizontal",
      "align": "left",
      "label": "带文字（左对齐）"
    },
    {
      "orientation": "horizontal",
      "align": "center",
      "label": "带文字（居中）"
    },
    {
      "orientation": "vertical",
      "align": "center",
      "label": "垂直分割线"
    }
  ],
  "anatomy": {
    "divider": "根元素，水平时为 1px 高",
    "text": "可选文字，居中或左/右对齐",
    "line": "文字两侧的线"
  },
  "structurePatterns": {
    "orientation": "horizontal / vertical",
    "align": "left / center / right（带文字时生效）"
  },
  "usageHints": [
    "在内容之间画一条细分隔线；带文字时用于分区标题",
    "纯静态，不参与点击与手势",
    "垂直分割线高度跟随父容器（用 align-self: stretch）",
    "纯装饰：role=separator + aria-hidden=true（对读屏无信息量）"
  ],
  "doNotInvent": [
    "主题化分割线（渐变、图片）的表现"
  ],
  "unknowns": [
    "垂直分割线的推荐间距"
  ],
  "interaction": [
    "纯静态，不参与点击与手势",
    "垂直分割线高度跟随父容器（用 align-self: stretch）"
  ],
  "accessibility": [
    "纯装饰：role=\"separator\" + aria-hidden=\"true\"（对读屏无信息量）",
    "带文字的分割线不隐藏，文字本身即语义"
  ],
  "api": {
    "source": "implementation",
    "note": "props / events / slots 为 6 端实现的公共接口（说明文字取自规格对应小节）。字段名与各端源码逐名核对：node tools/verify-mobile-docs.mjs",
    "requiredNote": "「必传」按严格定义：实现里**没有默认值**时才为 Y（本门禁逐条核对 props 与各端源码的默认值，防止契约与实现脱节）。",
    "props": [
      {
        "name": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "desc": "变体 orientation（规格 §8.3）",
        "required": false
      },
      {
        "name": "align",
        "type": "'left' | 'center' | 'right'",
        "default": "'center'",
        "desc": "变体 align：带文字时的对齐方式（规格 §8.3）",
        "required": false
      },
      {
        "name": "dashed",
        "type": "boolean",
        "default": "false",
        "desc": "变体 dashed：虚线（规格 §8.3）",
        "required": false
      }
    ],
    "events": [],
    "slots": [
      {
        "name": "default",
        "desc": "可选文字，居中或左/右对齐（规格 §8.2）"
      }
    ]
  },
  "variantClasses": {
    "orientation": {
      "horizontal": [],
      "vertical": [
        ".kole-m-divider--vertical"
      ]
    },
    "align": {
      "left": [
        ".kole-m-divider--left"
      ],
      "center": [
        ".kole-m-divider--center"
      ],
      "right": [
        ".kole-m-divider--right"
      ]
    },
    "dashed": {
      "false": [],
      "true": [
        ".kole-m-divider--dashed"
      ]
    }
  },
  "demos": [
    {
      "id": "basic",
      "group": "01 组件类型",
      "title": "基础用法",
      "desc": "一条 1px 的水平分隔线。",
      "variant": "orientation=horizontal"
    },
    {
      "id": "text-center",
      "group": "01 组件类型",
      "title": "带文字（居中）",
      "desc": "文字两侧各一条线，用作分区标题。",
      "variant": "align=center"
    },
    {
      "id": "align",
      "group": "01 组件类型",
      "title": "文字对齐",
      "desc": "左/右对齐时另一侧的线自然变长。",
      "variant": "align=left | right"
    },
    {
      "id": "vertical",
      "group": "02 组件状态",
      "title": "垂直分割线",
      "desc": "行内并列元素之间用垂直分割线，高度跟随父容器。",
      "variant": "orientation=vertical"
    },
    {
      "id": "dashed",
      "group": "02 组件状态",
      "title": "虚线",
      "desc": "虚线用于弱分隔（如「没有更多了」）。",
      "variant": "dashed=true"
    }
  ],
  "related": [
    {
      "slug": "cell",
      "why": "单元格自带行间分隔线，列表里不需要再插分割线"
    },
    {
      "slug": "cell",
      "why": "列表单元格自带内容分隔；独立内容区之间才使用分割线"
    }
  ]
}