分割线 Divider

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

使用

API

用法示例

基础用法

<ti-divider></ti-divider>

分割线风格

<ti-divider>实线</ti-divider>
<ti-divider dashed>虚线</ti-divider>

文字对齐方式

<ti-divider text-align="left">居左</ti-divider>
<ti-divider text-align="center">居中</ti-divider>
<ti-divider text-align="right">居右</ti-divider>

分割线颜色

<ti-divider color="red">整体红色</ti-divider>
<ti-divider border-color="blue">分割线蓝色</ti-divider>
<ti-divider color="red" border-color="blue">
  文字红色、分割线蓝色
</ti-divider>
<ti-divider border-color="linear-gradient(to right, #fff 0%, #FFBE70 100%)" border-width="{{6}}">
  线性渐变（默认对称）
</ti-divider>

分割线厚度

<ti-divider border-width="6">分割线厚度</ti-divider>

分割线方向

<ti-divider orientation="horizontal">横向</ti-divider>
<ti-divider orientation="vertical">纵向</ti-divider>

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	分割线文字颜色	-