rice-ui

暗黑模式

Divider 分割线 ​

手机扫码预览
01:50
组件名：rice-divider

用于分割内容

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

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

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

展示文本 ​

  • 通过 text 可以设置文本内容
  • 通过 text-position 可以设置文本显示的位置，默认为 center 可选 left right
html
<rice-divider text="文字信息" text-position="left" />
<rice-divider text="文字信息" />
<rice-divider text="文字信息" text-position="right" />

自定义样式 ​

  • 通过 text-size 设置文本的大小
  • 通过 text-color 设置文本的颜色
  • 通过 line-color 设置线条的颜色
html
<rice-divider text="文字信息" text-size="12" text-color="#1989fa" line-color="#1989fa"></rice-divider>

自定义插槽 ​

html
<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的线条 ​

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

API ​

Props ​

属性名类型说明默认值
dashedBoolean是否虚线，默认false-
hairlineBoolean使用0.5px的线条，默认true-
line-colorString线条颜色-
textString|Number文本内容-
text-positionString文本的位置，默认center，可选值：left、right、center-
text-colorString文本颜色-
text-sizeString|Number文本大小-
custom-styleObject自定义样式-

类型定义 ​

组件导出如下类型

ts
// 组件类型

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