分割线 Divider

用于将内容分隔为多个区域

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-divider": "@titian-design/weapp/divider/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-divider": "platform://titian-mp/ti-divider"
  }
}

用法示例

单独使用

copy

code

<ti-divider />

对齐方式

居左居中居右

copy

code

<ti-divider color="rgba(0, 0, 0, 0.90);" text-align="left"> 居左 </ti-divider>
<ti-divider color="rgba(0, 0, 0, 0.90);" text-align="center"> 居中 </ti-divider>
<ti-divider color="rgba(0, 0, 0, 0.90);" text-align="right"> 居右 </ti-divider>

分割线方向

copy

code

<ti-divider orientation="horizontal" />
<ti-divider orientation="vertical" />

分割线风格

copy

code

<ti-divider />
<ti-divider dashed />

分割线颜色

文字文字文字

copy

code

<ti-divider color="red">文字</ti-divider>
<ti-divider color="red" border-color="#2A6AE9"> 文字 </ti-divider>
<ti-divider
  color="red"
  border-color="linear-gradient(270deg, #FA2C19 0%, rgba(255, 255, 255, 0.00) 99.69%)"
  border-width="{{ 6 }}"
>
  文字
</ti-divider>

分割线厚度

copy

code

<ti-divider border-width="{{ 6 }}" />

ti-divider API

属性 Properties

名称	类型	必填	默认值	说明	备注
dashed	boolean	否	false	虚线	-
hairline	boolean	否	false	发丝线	-
text-align	string	否	center	文本位置，可选值 left center right	-
color	string	否	-	颜色，包括分割线和文字	-
border-color	string	否	-	分割线颜色	-
border-width	number	否	2	分割线厚度，单位rpx	-
orientation	string	否	horizontal	分割线方向，可选值horizontal vertical	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

插槽 Slots

名称	说明	备注
default	默认插槽	orientation 为 horizontal 可用

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--divider-gap	theme.spacing.gap.g6	分割线和文字间距（orientation="horizontal"）	-
	theme.spacing.gap.g0	分割线和文字间距（orientation="vertical"）	-
--divider-width	2px	分割线厚度	-
--divider-color	theme.color.gray.texticon.50	分割线颜色	-
--divider-style	solid	分割线类型	-
--divider-font-size	theme.fontSize.t4	分割线文字字号	-
--divider-text-color	theme.color.gray.texticon.550	分割线文字颜色	-