water_xcx/miniprogram_npm/tdesign-miniprogram/divider/README.md

3.1 KiB
Raw Blame History

title description spline isComponent
Divider 分割符 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 message true

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-divider": "tdesign-miniprogram/divider/divider"
}

主题定制

CSS 变量名 说明
--td-divider-color 分割线颜色
--td-divider-content-color 分割线文本颜色

代码演示

基础分割符

分割符主要是由直线和文字组成,通过slot传入分割线文案或者其他自定义内容,通过layout控制分隔符是垂直还是横向,line-color属性可定义线条颜色

{{ base }}

文字 + 直线

{{ text-line }}

纯文字 + 分割

{{ text-only }}

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
line-color String - 分隔线颜色 N
theme String horizontal 已废弃。请更为使用 layout。分隔线类型有两种水平和垂直。可选项horizontal/vertical N