## Divider 分割线
区隔内容的分割线。
对不同章节的文本段落进行分割。
对行内文字/链接进行分割,例如表格的操作列。
![](https://img.kancloud.cn/ad/cd/adcd9ded0c7564b817d9c543dc251304_1914x164.png)
### 代码示例
```html
<div>
Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.
<cvu-divider margin="10px 0"></cvu-divider>
Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc.
</div>
```
标题位置
![](https://img.kancloud.cn/ed/3f/ed3f85074decf7fac303300abc39246f_1908x320.png)
- 标题位于左侧
```html
<cvu-divider orientation="left">Left Text</cvu-divider>
```
- 标题位于中间(默认)
```html
<cvu-divider orientation="center">Center Text</cvu-divider>
```
- 标题位于右侧
```html
<cvu-divider orientation="right">Right Text</cvu-divider>
```
垂直分割线
![](https://img.kancloud.cn/3e/c3/3ec34b246db27cd29fb27c3dc0e33bd5_1917x83.png)
>[info] `type`设置为`vertical`
```html
<cvu-divider type="vertical" />
```
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 水平还是垂直类型,可选值为 horizontal 或 vertical | String | horizontal |
| orientation | 分割线标题的位置,可选值为 left、right 或 center | String | center |
| dashed | 是否虚线 | Boolean | false |
| plain | 文字是否显示为普通正文样式 | Boolean | false |
| size | 尺寸,可选值为 small 或 default | String | default |
| margin | 间距 | String | 0px |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器