You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
title: Divider 分割线
description: 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
spline: message
isComponent: true
---
< span class = "coverages-badge" style = "margin-right: 10px" >< img src = "https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></ span >< span class = "coverages-badge" style = "margin-right: 10px" >< img src = "https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></ span >< span class = "coverages-badge" style = "margin-right: 10px" >< img src = "https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></ span >< span class = "coverages-badge" style = "margin-right: 10px" >< img src = "https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></ span >
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents" : {
"t-divider" : "tdesign-miniprogram/divider/divider"
}
```
## 代码演示
### 基础分割符
分割符主要是由直线和文字组成,通过`slot`传入分割线文案或者其他自定义内容,通过`layout`控制分隔符是垂直还是横向
{{ base }}
### 虚线样式
{{ theme }}
## API
### Divider Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | center | 文本位置( 仅在水平分割线有效) 。可选项: left/right/center | N
content | String / Slot | - | 子元素 | N
dashed | Boolean | false | 是否虚线(仅在水平分割线有效) | N
external-classes | Array | - | 组件类名,分别用于设置 组件外层类名、分隔线类名 等。`['t-class', 't-class-line', 't-class-content']` | N
layout | String | horizontal | 分隔线类型有两种: 水平和垂直。可选项: horizontal/vertical | N