Section 标题栏

用于显示带描述、修饰线或右侧操作内容的标题。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 带修饰线和描述的标题 -->
<fui-section title="推荐内容" descr="为你精选" isLine />

属性

除注明需要带单位的属性外，尺寸和间距单位为 rpx。

属性	类型	说明	官网默认值
title	String	标题文字	-
size	Number / String	标题字号	32
lineHeight	Number / String	标题行高，0 表示与字号相同	0
color	String	标题颜色	#181818
fontWeight	Number / String	标题字重	600
descr	String	描述文字	-
descrSize	Number / String	描述字号	28
descrColor	String	描述颜色	#B2B2B2
descrTop	Number / String	描述与标题的间距	12
isLine	Boolean	是否显示标题修饰线	false
lineWidth	String	修饰线宽度，需提供单位	2px
lineColor	String	修饰线颜色	#465CFF
lineCap	String	修饰线端点形状：square 或 circle	circle
lineRight	Number / String	修饰线与标题的距离	16
lineGap	Number / String	修饰线上下留白	0
background	String	背景色	transparent
padding	Array	容器内边距，按上、右、下、左顺序设置	['0', '32rpx']
marginTop	Number / String	上外边距	0
marginBottom	Number / String	下外边距	0

事件

事件	说明	回调参数
click	点击标题时触发	{ title }

插槽

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

平台说明

非 nvue 平台可通过 --fui-color-primary 调整修饰线默认颜色。nvue Android 不支持负数的 lineRight。