---
title: Divider 分割线
description: 分隔内容区块的水平或垂直线条
category: Basic
status: beta
since: 0.3.7
tags: [divider, separator, layout]
syncStatus: reviewed
verified: true
---

## 用法

### 基础
默认插槽显示文字，`textPlacement` 决定文字位置。
:::TuffDemoWrapper{demo="DividerBasicDemo" code-lang="vue"}
---
code: |
  <template>
    <p>主要配置区域</p>
    <TxDivider />
    <p>高级配置区域</p>
    <TxDivider text-placement="left">高级选项</TxDivider>
    <TxDivider dashed text-placement="right">虚线分割</TxDivider>
  </template>
---
:::

### 渐变
`gradient` 取 `start`、`end` 或 `both`；`true` 等同 `both`。
:::TuffDemoWrapper{demo="DividerGradientDemo" code-lang="vue"}
---
code: |
  <template>
    <TxDivider gradient="start" />
    <TxDivider gradient="end" />
    <TxDivider gradient />
    <TxDivider gradient text-placement="center">渐变标签</TxDivider>
  </template>
---
:::

### 垂直
`direction="vertical"` 用于行内分隔，同样支持 `dashed` 与 `gradient`。
:::TuffDemoWrapper{demo="DividerVerticalDemo" code-lang="vue"}
---
code: |
  <template>
    <span>已发布</span>
    <TxDivider direction="vertical" />
    <span>平台团队</span>
    <TxDivider direction="vertical" dashed />
    <span>刚刚更新</span>
    <TxDivider direction="vertical" gradient />
    <span>渐变</span>
  </template>
---
:::

### 最佳实践

- 用分割线分隔语义区块，不要逐行添加；密集表格与列表用行距或表格边框。
- 文字标签保持简短；长文本改用真实标题。
- 垂直分割线只用于行内元信息或工具栏，且周围文本已提供上下文。
- Drawer、Card、Form 内的分隔用 `TxDivider`，不要硬编码边框。

## API 参考

### 属性

::TuffPropsTable
---
rows:
  - name: direction
    description: '分割线方向。'
    type: "'horizontal' | 'vertical'"
    default: "'horizontal'"
  - name: dashed
    description: '显示为虚线。'
    type: 'boolean'
    default: 'false'
  - name: textPlacement
    description: '水平分割线的文字位置。'
    type: "'left' | 'center' | 'right'"
    default: "'center'"
  - name: gradient
    description: '渐变透明的方向；true 等同 both。'
    type: "boolean | 'start' | 'end' | 'both'"
    default: 'false'
---
::

### 插槽

::TuffPropsTable
---
rows:
  - name: default
    description: '水平分割线中的文字；垂直时不渲染。'
    type: '-'
    default: '-'
---
::

## 概述

- 根节点为 `role="separator"`，`aria-orientation` 取自 `direction`。
- 水平分割线占满容器宽度；文字只在水平方向渲染。
- `start` 从透明过渡到实线，`end` 从实线过渡到透明，`both` 两端透明、中间实线；垂直方向沿纵轴渐变。

## 技术实现

- 源码：`packages/tuffex/packages/components/src/divider/`。

<TuffDocSourceLink />