跳到主要内容

分割线

用于区隔内容的分割线组件。

何时使用​

  • 分隔不同章节的文本段落，增强内容层次感。
  • 分隔行内文字、链接等内容（如表格操作列），提升信息清晰度。

一、属性​

1. 通用属性​

1）标题​

设置分割线上的标题内容。标题支持三种绑定方式：

  • 手动赋值：直接显示用户输入的文字。
  • 数据绑定
  • 组件绑定

数据绑定和组件绑定详见：数据绑定

示例 - 手动赋值：
image-20250714095855329
image-20250714095817359

支持自定义标题样式，可添加图标与文字组合：
image-20250714100423415

2）标题位置​

可选项：

  • 左
  • 中（默认）
  • 右

效果如下所示：
image-20250714100502243
image-20250714102119285

3）垂直模式​

  • 默认关闭
  • 开启后分割线垂直显示
  • 开启后 无法设置标题及标题位置

示例：
image-20250714102215674
image-20250714102511482

4）虚线模式​

  • 默认关闭
  • 开启后分割线显示为虚线样式

示例：
image-20250714102753101

5）细线模式​

  • 默认开启
  • 关闭后线条会变粗

两种模式对比如下：
image-20250714103449449

2. 状态​

无特殊状态，详见：通用状态

二、样式​

无特殊样式配置，详见：通用样式

三、常见使用场景​

1. 内容分隔​

在长文本或多个段落之间插入分割线，区分不同内容块。
image-20250714103604280

2. 标题与内容分隔​

用于标题与正文之间，增强层级感。
image-20250714103941496

3. 分组信息​

在表单或信息展示中使用，逻辑上分组不同信息段。
image-20250714104833598

4. 卡片组件中使用​

在卡片内部进行内容区隔，提升视觉清晰度。
image-20250714104103127