SegmentedControl 分段器

在多个互斥选项之间切换，支持按钮和文字两种样式。

支持平台

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

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

基础用法

<!-- 分段选项 -->
<fui-segmented-control :values="['全部', '进行中', '已完成']" @click="handleSegmentClick" />

在 handleSegmentClick 中读取返回的 index 并更新页面内容。

属性

尺寸和间距单位为 rpx。

属性	类型	说明	官网默认值
values	Array	选项数组，支持字符串或对象	[]
nameKey	String	对象中显示名称的字段	name
disabledKey	String	对象中禁用标记的字段	disabled
current	Number	当前选中索引	0
type	String	外观：button 或 text	button
color	String	边框、未选中文字及选中背景颜色	#465CFF
activeColor	String	选中文字颜色	#fff
bold	Boolean	选中文字是否加粗	false
height	Number / String	高度	64
size	Number / String	字号	28
radius	Number / String	圆角	8
disabled	Boolean	是否禁用所有选项	false
marginTop	Number / String	上外边距	0
marginBottom	Number / String	下外边距	0

事件

事件	说明	回调参数
click	切换分段选项	包含 index 和当前选项字段的对象

平台说明

非 nvue 的 color 默认由 --fui-color-primary 控制。

插槽

插槽	说明
—	官网未列出该组件的插槽