# SegmentedControl 分段器

概述

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

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "分段器",
  "usingComponents": {
    "fui-segmented-control": "/components/firstui/fui-segmented-control/fui-segmented-control"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-segmented-control": "components/firstui/fui-segmented-control/fui-segmented-control"
}
1
2
3

# 代码演示

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

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

<fui-segmented-control values="{{values}}"></fui-segmented-control>
1
//values数据格式一
values: ['segmented1', 'segmented2']
1
2
不同数据格式

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

<fui-segmented-control values="{{values}}"></fui-segmented-control>
1
//values数据格式二,其中约定属性为name(必选),disabled(可选)。其他为自定义属性。
values2: [{
	id: 1,
	name: 'segmented1'
}, {
	id: 2,
	name: 'segmented2'
}, {
	id: 3,
	name: 'segmented3'
}]
1
2
3
4
5
6
7
8
9
10
11

# 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
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Events

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

示例预览

Last Updated: 5/30/2024, 10:36:22 AM