---
order: 10
navTitle: 分割条
---
# SuperPage组件-分割条

分割条是用于分割页面布局的组件，例如上下布局的页面，可以使用分割条分割成上下布局，可以拖拽分割条改变上下布局的大小，也可以折叠收起布局中的内容。效果如下所示：

![分割布局](./images/splitline1.gif)

示例地址：[分割条](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%86%E5%89%B2%E6%9D%A1)

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

分割条根据分割上下、左右的布局可以衍生多种其他布局，比如左-右上-右下、左上-左下-右等。以左-右上-右下布局为例，如下是操作步骤：

![分割条](./images/splitline2.gif)

1. **分割左右布局**：在**组件区**>**布局**中将**竖直双向箭头**的**分割条**组件拖入面板中，放置于左侧面板与右侧面板中间
2. **分割上下布局**：拖入**水平双向箭头**的**分割条**组件，放置于右侧上下面板中间，可拖动分割条

:::tip

分割条较细时，无法选中或者不能右键进行删除，可点击左上角**文件**>**显示/隐藏组件大纲**，在弹出的组件树中选择对应分割条组件进行操作即可

:::

## 属性介绍{#attribute}

### 拖动和折叠设置{#drag-fold}

分割条可设置拖动和展开折叠两种操作属性，效果可查看文档开头效果图。在**属性栏**>**分割条**下勾选**可拖动**与**可展开折叠**属性即可：

![折叠](./images/2020-10-23-10-40-54.png)

**拖动**

在查看界面可以拖动分割条快速调整布局大小，勾选**可拖动**属性即可，默认被勾选。当勾选该属性时，鼠标移至分割条上，会出现可拖动的图标，即可进行左右或者上下拖动改变布局大小。

**展开折叠**

对分割条分割的组件进行折叠和展开，选择性查看内容，勾选**可展开折叠**属性即可，默认不勾选。当勾选该属性后，会展开三个相关属性设置：

- 折叠方向：设置折叠的方向，且只对该方向上的组件折叠与展开。
  - 竖直分割条：可选左侧或右侧，默认折叠左侧组件
  - 水平分割条：可选上方或下方，默认折叠上方组件
- 默认折叠：属性勾选后，组件初始为折叠状态
- 显示折叠/展开图标：属性勾选后，折叠/展开图标总是显示；当不勾选时，只有鼠标移至分割条才会显示该图标

### 两边间距{#space}

两边边距，即分割条与分隔开的组件的两边距离。在**属性栏**>**样式**>**两边间距**中进行设置：

![两边边距](./images/2020-10-23-10-49-24.png)

### 线条{#line}

分割条的线条效果可以自定义，提供了线条虚实线、颜色和粗细设置。在**属性栏**>**样式**>**线条**中进行设置：

![线条](./images/2020-10-23-10-53-53.png)

## 应用场景{#scene}

### 折叠/展开条件{#condition}

根据实际情况可分割不同布局，清晰展示业务需求，比如展示默认条件下的数据，仅在需要切换条件时才显示可选条件。使用分割条分割左右布局，左侧为选择条件，右侧为列表数据，默认折叠左侧条件即可：

![场景](./images/cj.gif)