---
order: 11
navTitle: 分割线
---
# SuperPage组件-分割线

分割线是用于分割页面布局的组件，类似[分割条](./splitline.md)组件。与分割条的区别是，分割线适用于上下布局的页面且带有标题，可以折叠收起与分割线同级的组件。如下是在段落之间设置分割线且能折叠的效果：

![分割线](./images/divider.gif)

示例地址：[分割线](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%86%E5%89%B2%E7%BA%BF)

## 使用分割线组件{#use}

分割线用于分割上下布局，可为下方组件设置标题以及折叠下方组件，只需将分割线拖入到需要被折叠组件的上方使用即可，具体操作步骤如下所示：

![操作步骤](./images/divider1.gif)

1. **使用分割线组件：** 在**组件区**>**布局**中将**分割线**组件拖入到画布中
2. **设置分割线标题**：在**属性栏**>**分割线**>**标题**中设置即可，例如`SuccBI`
3. **设置分割线样式：** 在**属性栏**>**样式**中可设置分割线的风格，比如设置居中分割线

## 属性介绍{#attribute}

### 标题{#title}

设置分割线的标题内容，也可以为标题设置图标前缀：

- 标题内容：在**属性栏**>**分割线**>**标题**中设置即可
- 图标前缀：在**属性栏**>**样式**>**图标**中设置即可，也可设置图标样式

![标题](./images/2020-10-26-16-59-07.png)

### 展开折叠{#fold}

对分割线下方到下一个分割线之前的同级组件进行折叠或展开，当内容较多可进行折叠，以便查看其他内容。

在**属性栏**>**分割线**下勾选**可展开折叠**属性即可，默认勾选，当勾选该属性后可对下方属性进行设置：

![展开折叠](./images/2020-10-26-17-46-03.png)

- 默认折叠：属性勾选后，分割线下方同级组件初始为折叠状态
- 折叠/展开图标：在**属性栏**>**样式**>**折叠/展开图标**中可对图标显示位置与颜色进行设置
  - 左侧显示：将折叠/展开图标显示在最左侧，包括图标前缀的左侧，不勾选时默认显示在右侧
  - 颜色：设置折叠/展开图标的颜色

### 连接线{#connector}

连接线即分割线中的线条，用于修饰分割效果，可设置线条样式与线条位置。在**属性栏**>**样式**>**连接线**中设置即可：

![连接线](./images/2020-10-26-17-57-25.png)

- 线条：设置分割线的线条虚实线、颜色与粗细
- 线条位置：设置分割线相对于标题的位置，可设置居上、居中、居下

## 应用场景{#scene}

### 折叠收起过滤选项{#filter-option}

选项较多时，可使用分割线对其进行分类隔开，分别设置标题，且对选项较多类别可设置默认折叠，方便查看其他类别选项。如企业类型和所属行业类别选项较多，可设置默认折叠：

![应用场景](./images/divider2.gif)

示例地址：[折叠收起过滤选项](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%86%E5%89%B2%E7%BA%BF)