跳到主要内容

分割线

用于区隔内容的分割线。

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

一、属性​

1. 属性​

1）通用 - 朝向​

朝向：提供水平和垂直两种配置，默认为水平。

image-20250605141010603

朝向 - 水平：默认带文字，宽度为父容器宽度。

image-20240830155509391

朝向 - 垂直：切换为垂直分割线后，默认不带文字，高度默认为最小值，需自行配置高度。另外，除虚线配置外，其余配置项不提供。

image-20240830155636247
image-20240830155443391

2）通用 - 标题​

标题 - 输入模式：默认为输入模式，值为“标题”，支持直接修改。

image-20240830154244386

输入模式的标题提供三种赋值方式，详见 数据绑定。

image-20250605141358410

标题 - 设计模式：可切换到设计模式，通过其他一个或多个组件设计标题。

image-20240830154517053

3）通用 - 标题位置​

标题位置：提供三种位置可选，默认为“中”，左、右两种位置如下图所示。

image-20240830155354934
image-20240830154643480
image-20240830154714214

4）通用 - 虚线​

虚线：默认关闭，开启后分割线从实线变为虚线。

image-20240830155338141
image-20240830154906869

5）通用 - 正文样式​

正文样式：默认关闭，开启后分割线的文字样式为普通文字样式（字号较默认略小）。

image-20240830155323683
image-20240830160118422

二、样式​

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

三、常见使用场景​

  1. 内容分隔
    在长文本或多个段落之间添加分割线，以明确区分不同主题或内容块。

    image-20240822171727791

  2. 标题与内容分隔
    在标题和其对应内容之间使用分割线，帮助用户快速识别内容结构。

    image-20240822172258161

  3. 分组信息
    在表单或信息展示中，使用分割线将相关信息分组，提升用户体验。

    image-20240822173436675

  4. 卡片组件
    在卡片布局中，使用分割线将卡片内容分隔，提供更清晰的视觉效果。

    image-20240822175249026