Divider 分割线

手机扫码预览

17:48



---

组件名：rice-divider

用于分割内容

平台兼容性

uni-app x

Android	Android(Vapor)	iOS	iOS(Vapor)	HarmonyOS	HarmonyOS(Vapor)	微信小程序	h5
√	√(1.1.9+)	√	√(1.1.3+)	√	√(1.1.0+)	√	√

基础用法

默认为实线，dashed 为 true 即可设置为虚线样式

<rice-divider />
<rice-divider dashed />

展示文本

• 通过 text 可以设置文本内容
• 通过 text-position 可以设置文本显示的位置，默认为 center 可选 left right

<rice-divider text="文字信息" text-position="left" />
<rice-divider text="文字信息" />
<rice-divider text="文字信息" text-position="right" />

自定义样式

• 通过 text-size 设置文本的大小
• 通过 text-color 设置文本的颜色
• 通过 line-color 设置线条的颜色

<rice-divider text="文字信息" text-size="12" text-color="#1989fa" line-color="#1989fa"></rice-divider>

自定义插槽

<rice-divider text-position="center" line-color="#52a8ff">
  <rice-icon name="star" size="18px" color="#52a8ff"></rice-icon>
</rice-divider>

<rice-divider text-position="center"  :custom-style="{'width':'100px'}">
  <rice-loading size="16" />
</rice-divider>

1px的线条

<rice-divider :hairline="false" />

API

Props

属性名	类型	说明	默认值
dashed	Boolean	是否虚线，默认false	-
hairline	Boolean	使用0.5px的线条，默认true	-
line-color	String	线条颜色	-
text	String|Number	文本内容	-
text-position	String	文本的位置，默认center，可选值：left、right、center	-
text-color	String	文本颜色	-
text-size	String|Number	文本大小	-
custom-style	Object	自定义样式	-

类型定义

组件导出如下类型

// 组件类型

const dividerRef = ref<RiceDividerRefComponentPublicInstance | null>(null)