# Divider 分割线

分割线是一个呈线状的轻量化组件，起到分隔、组织、细化的作用，用于有逻辑的组织元素内容和页面结构。

### 基础分割线

基础分割线是没有文字的独立线条，又分为水平分割线和垂直分割线。

#### 水平分割线

水平分割线常用来对不同元素内容进行分割。

demo 文案：

这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

———————————————————————————————————————————————————————————————————————————

这是第二种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

————————————————————————————————————————————————————————————————————————————

这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。

#### 垂直分割线

垂直分割线常用来做行内分割。

demo

### 带文字的分割线

带文字的分割线是在分割线中嵌入文字，在需要对分割内容进行解释说明时使用。

demo

## 组件设计指南

### 何时使用

需要对不同章节的文本段落进行分割时；

需要对行内文字、链接等进行分割时。

### 与页面布局相关

##### 通栏布局。横向贯穿整个页面，区分更加独立的内容信息，让信息分隔的更明显。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-1.png"/>

<hr />

##### 内嵌布局。一般在两侧预留缺口，区分同一模块下的相关内容，让用户浏览时更加高效。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-2.png"/>

<hr />

##### 组合布局。通栏分割线与内嵌分割线的组合布局。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-3.png"/>

### 推荐/慎用示例

##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-4.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-5.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>
