Divider 分割线

概述

Divider 分割线，可自定义线条宽度、颜色等。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "分割线",
  "usingComponents": {
    "fui-divider": "/components/firstui/fui-divider/fui-divider"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-divider": "components/firstui/fui-divider/fui-divider"
}

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置提示内容。

<fui-divider text="没有更多了"></fui-divider>

修改颜色

通过 dividerColor 属性修改线条颜色，color 属性修改字体颜色。

<fui-divider dividerColor="#FFB703" color="#FFB703" text="没有更多了"></fui-divider>

修改线条宽度

通过 width 属性修改线条宽度。

<fui-divider width="500rpx" text="没有更多了"></fui-divider>

Slots

插槽名称	说明
default	提示信息部分自定义展示内容

Props

属性名	类型	说明	默认值	其他说明
text	String	提示内容	-	-
height	Number,String	divider占据高度，单位rpx	100	-
width	String	divider宽度	400rpx	-
dividerColor	String	divider颜色	#CCCCCC	-
color	String	提示文字颜色	#B2B2B2	-
size	Number, String	提示文字大小，单位rpx	24	-
fontWeight	Number, String	提示文字字重	400	-
backgroundColor v2.4.0+移除	String	背景颜色，和当前页面背景色保持一致	#F1F4FA	v2.4.0+之后不再需要此属性

Events

事件名	说明	回调参数
-	-	-

示例预览