SegmentedControl 分段器

概述

SegmentedControl 分段器，分段器由至少 2 个分段控件组成，用作不同视图的显示。

引入

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

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

{
  "navigationBarTitleText": "分段器",
  "usingComponents": {
    "fui-segmented-control": "/components/firstui/fui-segmented-control/fui-segmented-control"
  }
}

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

"usingComponents": {
    "fui-segmented-control": "components/firstui/fui-segmented-control/fui-segmented-control"
}

代码演示

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

基础使用

通过 values 属性设置分段器数据。

<fui-segmented-control values="{{values}}"></fui-segmented-control>

//values数据格式一
values: ['segmented1', 'segmented2']

不同数据格式

通过 values 属性设置分段器数据。

<fui-segmented-control values="{{values}}"></fui-segmented-control>

//values数据格式二，其中约定属性为name（必选），disabled（可选）。其他为自定义属性。
values2: [{
	id: 1,
	name: 'segmented1'
}, {
	id: 2,
	name: 'segmented2'
}, {
	id: 3,
	name: 'segmented3'
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	其他说明
values	Array	分段器列表数据，具体格式见下方详细说明	[ ]	-
nameKey V2.4.0+	String	values数据中 name 值指定的key	name	-
disabledKey V2.4.0+	String	values数据中 disabled 值指定的key	disabled	-
current	Number	分段器初始选中项索引	0	-
type	String	分段器显示类型，可选值：button、text	button	-
color	String	分段器颜色（边框颜色、未选中字体颜色、选中背景色）	-	如果值为空，可以通过css变量（--fui-color-primary）修改默认颜色值
activeColor	String	分段器选中项字体颜色	#fff	-
bold	Boolean	分段器选中项字体是否加粗	false	-
height	Number, String	分段器高度，单位rpx	64	-
size	Number, String	分段器字体大小，单位rpx	28	-
radius	Number, String	分段器圆角值，单位rpx	8	-
disabled	Boolean	是否禁用所有项，单项禁用在values中传入属性控制，详见下方values属性说明	false	-
marginTop	Number, String	分段器margin-top值，单位rpx	0	-
marginBottom	Number, String	分段器margin-bottom值，单位rpx	0	-

values数据格式详细说明

values 为Array类型，内部数据格式有两种类型.

//第一种数据格式Array<String>：
['segmented1', 'segmented2']

//第二种数据格式Array<Object>，约定属性如下，其他属性可自行定义传入：
 [{
	//分段器显示文本，key值可使用nameKey属性指定，必选
	name: 'segmented1',
	//是否禁用当前项，key值可使用disabledKey属性指定，可选
	disabled: false
}, {
	//分段器显示文本，必选
	name: 'segmented2',
	//是否禁用当前项，可选
	disabled: true
}]

Events

事件名	说明	回调参数
bind:click	分段器切换时触发	event.detail = {   index:索引   ...values[index]:当前索引对应分段器数据 }

示例预览