Section 标题栏 V1.9.9+

概述

Section 标题栏，主要用于文章、列表详情等标题展示。

引入

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

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

{
  "navigationBarTitleText": "标题栏",
  "usingComponents": {
    "fui-section":"/components/firstui/fui-section/fui-section"
  }
}

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

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

代码演示

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

基础使用

通过 title 属性设置标题，descr 属性设置描述信息。

<fui-section title="Section" descr="Section 标题栏，主要用于文章、列表详情等标题展示。"></fui-section>

装饰线条

通过 isLine 属性设置是否显示装饰线条。

<fui-section title="装饰线条" isLine></fui-section>

Slots

插槽名称	说明
default	标题左侧自定义内容
right	标题右侧自定义内容
descr	自定义描述内容

Props

属性名	类型	说明	默认值	其他说明
title	String	标题	-	-
size	Number, String	标题字体大小，单位rpx	32	-
lineHeight	Number, String	标题行高，单位rpx，默认与字体大小相等	0	-
color	String	标题颜色	#181818	-
fontWeight	Number, String	标题字重	600	-
descr	String	描述文本	-	-
descrSize	Number, String	描述文本字体大小	28	-
descrColor	String	描述文本字体颜色	#B2B2B2	-
descrTop	Number, String	描述文本与标题的间距，单位rpx	12	-
isLine	Boolean	是否显示修饰线条	false	-
lineWidth	String	线条宽度，需自行带单位	2px	-
lineColor	String	线条颜色	#465CFF	可使用css变量 --fui-color-primary 调整颜色
lineCap	String	线条两端样式，可选值：square(直角)、circle（圆角）	circle	-
lineRight	Number, String	线条距离标题的距离	16	-
lineGap	Number, String	线条上下间距，单位rpx，默认为0，与标题同高	0	-
background	String	组件背景色	transparent	-
padding	String	组件外层容器padding值	0 32rpx	-
marginTop	Number, String	组件 margin-top 值，单位rpx	0	-
marginBottom	Number, String	组件 margin-bottom 值，单位rpx	0	-

Events

事件名	说明	回调参数
bind:click	点击标题时触发	event.detail = {   title:标题 }

示例预览