跳到主要内容

Divider 分割线

用于区隔内容的分割线。

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

一、属性​

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