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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

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

基础使用

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

<wui-segmented-control :values="values"></wui-segmented-control>

//values数据格式一
const values = ref(['常用服务', '门诊服务'])

不同数据格式

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

<wui-segmented-control :values="values"></wui-segmented-control>

//values数据格式二，其中约定属性为name（必选），disabled（可选）。其他为自定义属性。
const values =ref([{
    id: 1,
    name: '常用服务'
}, {
    id: 2,
    name: '门诊服务'
}, {
    id: 3,
    name: '住院服务'
}])

//第一种数据格式Array<String>：
['常用服务', '门诊服务']

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

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
values	Array	分段器列表数据，具体格式见下方详细说明	[ ]	-
current	Number	分段器初始选中项索引	0	-
type	String	分段器显示类型，可选值：button、text	button	-
color	String	分段器颜色（边框颜色、未选中字体颜色、选中背景色）	#465CFF	非Nvue端默认为空，可以通过css变量（--wui-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	-

Events

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