Ant Design Divider 垂直分割线完整指南：`orientation="vertical"` 与 `vertical` 用法详解

导读

在 Ant Design（antd）的布局体系中，Divider 组件不仅能横向区隔文章段落，更常用于行内场景——在表格操作列、导航链接、面包屑之间插入一条行内垂直分割线。本文以官方示例 vertical.md 及其配套演示为骨架，深入讲解垂直分割线的两种写法、二者与旧版 type 属性的优先级关系、底层样式实现原理，并结合仓库源码给出可直接复制使用的实战代码。

何时使用垂直分割线

官方 组件文档 明确了 Divider 的两个核心使用场景：

• 对不同章节的文本段落进行分割；
• 对行内文字/链接进行分割，例如表格的操作列。

其中第二种场景正是垂直分割线的主战场。与占据整行、自带上下 margin 的水平分割线不同，垂直分割线通过 display: inline-block 内联渲染在文本流中，用于视觉上区隔相邻的链接、标签或文本，而不会打断行内布局。

基础用法：两种写法实现垂直分割线

官方演示 vertical.tsx 给出了最标准的使用范式：把 Divider 直接嵌入行内文本中，不传任何子节点，靠组件自身撑起分隔线。

import React from 'react';
import { Divider } from 'antd';

const App: React.FC = () => (
  <>
    Text
    <Divider orientation="vertical" />
    <a href="#">Link</a>
    <Divider vertical />
    <a href="#">Link</a>
  </>
);

export default App;

写法一：orientation="vertical"

<Divider orientation="vertical" />

orientation 是当前推荐的方向控制属性，类型为 'horizontal' | 'vertical'，默认值 horizontal。显式传入 vertical 即可让分割线垂直排列。

写法二：布尔属性 vertical

<Divider vertical />

vertical 是专门为垂直分割提供的布尔速记属性，默认 false。当需要动态切换方向时，可以配合条件表达式使用，例如 <Divider vertical={isVertical} />。

垂直分割线是典型的不带子节点的用法，官方文档明确指出 children（标题文本）在 vertical 模式下不会生效，详见下文“交互细节”。

源码剖析：方向属性是如何合并的

为什么 orientation 和 vertical 都能控制方向？答案在 Divider 组件实现 index.tsx 中：它通过通用 Hook useOrientation 合并三类来源的方向信息。

// components/_util/hooks/useOrientation.ts
const isValidOrientation = (orientation?: Orientation) =>
  orientation === 'horizontal' || orientation === 'vertical';

export const useOrientation = (
  orientation?: Orientation,
  vertical?: boolean,
  legacyDirection?: Orientation,
): [Orientation, boolean] => useMemo(() => {
  // 1. orientation 合法则优先采用
  if (validOrientation) {
    mergedOrientation = orientation;
  }
  // 2. 否则看 vertical 是否为布尔值
  else if (typeof vertical === 'boolean') {
    mergedOrientation = vertical ? 'vertical' : 'horizontal';
  }
  // 3. 兜底使用旧版 type，仍不合法则退回 horizontal
  else {
    mergedOrientation = validLegacyDirection ? legacyDirection : 'horizontal';
  }
  return [mergedOrientation, mergedOrientation === 'vertical'];
}, [legacyDirection, orientation, vertical]);

由此可以梳理出清晰的优先级规则：

1. orientation 优先：只要它取值合法（horizontal/vertical），就直接决定方向；
2. 其次回退到 vertical 布尔属性（显式传入 true/false 时生效）；
3. 再回退到 已废弃的 type 属性（type="vertical"，见组件注释 @deprecated please use orientation）；
4. 最终兜底为 horizontal。

对应到文档 API 表格中的描述即为：vertical 为“是否垂直，和 orientation 同时配置以 orientation 优先”。例如 <Divider orientation="horizontal" vertical />，最终渲染的仍是水平分割线——这一点也被单元测试 index.test.tsx 所覆盖（[['horizontal', true, undefined], '.ant-divider-horizontal']）。

同名冲突：方向 vs 标题位置

需要注意的是，历史版本中 orientation 曾同时承担“标题位置”的职责（取值 left/right/center）。源码第 107-119 行对此做了兼容处理：若传入 left/right 这类旧值，会通过 validTitlePlacement 检测并将其映射为 start/end，同时结合 direction === 'rtl' 自动翻转。而在开发环境下，组件还会抛出 dev warning 提示应改用 titlePlacement 属性。因此对于垂直分割线，orientation 只应取 'vertical'，标题摆放请一律交给 titlePlacement。

渲染细节：垂直分割线到底长什么样

语义与结构

渲染出的 DOM 结构（无 children 时）非常简洁：

<div class="ant-divider ant-divider-vertical" role="separator"></div>

组件根节点带有 role="separator"（index.tsx），可被无障碍树正确识别为分隔元素，这也使得 a11y.test.ts 能够直接对垂直分割线进行可访问性断言。

关键 CSS 数值

垂直分割线的视觉形态完全由样式文件 style/index.ts 中的 &-vertical 规则决定：

'&-vertical': {
  position: 'relative',
  top: '-0.06em',          // 微调垂直对齐
  display: 'inline-block', // 行内盒，不换行
  height: '0.9em',         // 高度基于当前字号 em
  marginInline: verticalMarginInline, // 默认 marginXS（8px）
  marginBlock: 0,
  verticalAlign: 'middle', // 相对行内文本垂直居中
  borderTop: 0,
  borderInlineStart: `${unit(lineWidth)} solid ${colorSplit}`,
},

这些实现细节解释了使用时的直观感受：

• display: inline-block + vertical-align: middle：分割线以行内元素参与文字排版，自动与前后文本中线对齐，无需额外布局容器；
• height: 0.9em：线高随字体大小缩放，与相邻文本比例协调；
• borderInlineStart：物理上是左侧/逻辑起始侧 1px（lineWidth）的 colorSplit（分割线颜色 token）实线边框；
• marginInline 默认取 marginXS（8px）：即分割线与两侧内容默认保持 8px 间距。

虚线 / 点线变体

variant（5.20.0+）与布尔属性 dashed 同样适用于垂直分割线。样式表中为 &-vertical&-dashed、&-vertical&-dotted 单独处理了边框方向，确保只把横向线宽置 0 而不破坏 borderInlineStart 的线型：

<Divider vertical dashed />                    {/* 垂直虚线 */}
<Divider vertical variant="dotted" />          {/* 垂直点线 */}
<Divider vertical variant="solid" />           {/* 默认实线 */}

对应样式分支见 style/index.ts。单测中 <Divider dashed> 得到 borderStyle: 'dashed'、variant="dotted" 得到 borderStyle: 'dotted'（index.test.tsx）。

交互细节：vertical 模式下 children 不生效

在 Divider 源码中，是否渲染标题有明确约束：

{children && !mergedVertical && ( /* 渲染两侧 rail 与 inner-text */ )}

即当方向合并结果为 vertical 时，即便传入 children 也不会渲染标题。与此同时，开发环境下会输出 usage warning：

warning(!children || !mergedVertical, 'usage', '`children` not working in `vertical` mode.');

对应测试 not show children when vertical（index.test.tsx）也验证了 <Divider type="vertical">Bamboo</Divider> 不会产出 .ant-divider-inner-text 节点。

结论很明确：垂直分割线只用于纯视觉分隔，不要向其传入文本内容；需要“文字 + 两侧线段”的标题场景应使用水平分割线配合 titlePlacement。

实战：表格操作列与行内链接分隔

垂直分割线最典型的落地场景是表格的操作列。借助 Divider 的行内特性，可在编辑/删除等链接之间快速插入分隔：

import { Divider, Table } from 'antd';
import type { TableColumnsType } from 'antd';

const columns: TableColumnsType = [
  {
    title: '操作',
    key: 'action',
    render: () => (
      <>
        <a>编辑</a>
        <Divider type="vertical" />   {/* type 写法在运行期等价于 orientation="vertical" */}
        <a>详情</a>
        <Divider vertical />
        <a>删除</a>
      </>
    ),
  },
];

上面这段同时演示了旧写法 <Divider type="vertical" />。由于 type 已标记为 deprecated（源码中 type?: Orientation 注释为 @deprecated please use orientation），并会触发 warning.deprecated('type', 'orientation')，新代码请统一使用 <Divider orientation="vertical" /> 或 <Divider vertical />。

同样思路也可用于面包屑、页头操作区等行内链接/标签的区隔，实现与示例 vertical.tsx 完全一致的“Text | Link | Link”效果。

常见问题：间距与高度的微调

垂直分割线的间距由 Design Token 控制，无需写内联样式。组件 token 定义见 style/index.ts：

• verticalMarginInline：纵向分割线的横向外间距，默认取全局 marginXS（8px）。通过 ConfigProvider 主题定制缩小该值即可让分割线更贴近两侧文字：

  import { ConfigProvider } from 'antd';
  
  <ConfigProvider theme={{ components: { Divider: { verticalMarginInline: 4 } } }}>
    {/* ... */}
  </ConfigProvider>
  

• lineWidth、colorSplit 为全局别名 token，分别控制线宽（1px）与线的颜色。

高度方向默认随字号取 0.9em，若需更高（如撑满行内容器）可自行用样式覆盖，或改用 flex 布局配合自定义分隔元素。

总结

Ant Design 的垂直分割线虽小，但背后是清晰的属性合并策略与一套行内排版 CSS 设计。把握住三点即可游刃有余：

1. 写法：推荐 <Divider orientation="vertical" /> 或简洁的 <Divider vertical />，二者等价，且 orientation 优先级更高；
2. 定位：它是行内元素，只做视觉分隔，不承载文本（children 无效并触发 dev warning），适合表格操作列、链接组间的区隔；
3. 旧属性：type="vertical" 仍兼容可用，但官方已废弃，应迁移至新属性。

参考源码：组件实现 index.tsx、方向合并 Hook components/_util/hooks/useOrientation.ts、样式实现 style/index.ts、单元测试 index.test.tsx。