# tui-segmented-control 分段器

介绍

分段器,可用于选项卡切换,可自定义颜色。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiSegmentedControl from "@/components/thorui/tui-segmented-control/tui-segmented-control"
export default {
	components:{
		tuiSegmentedControl
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-segmented-control": "/components/thorui/tui-segmented-control/tui-segmented-control"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

默认使用

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

<!--uni-app-->
<tui-segmented-control :values="values" @click="change"></tui-segmented-control>

<!--微信小程序-->
<tui-segmented-control values="{{values}}" bindclick="change"></tui-segmented-control>

values: ['Segment1', 'Segment2']
自定义颜色

通过 activeColor 属性设置分段器颜色。

<!--uni-app-->
<tui-segmented-control :values="values" activeColor="#07c160" @click="change"></tui-segmented-control>

<!--微信小程序-->
<tui-segmented-control values="{{values}}" activeColor="#07c160" bindclick="change"></tui-segmented-control>

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
values Array 分段器菜单数据,字符串数组 [ ]
current Number 初始化当前选中项 0
activeColor String 分段器颜色 #5677fc
height String 分段器高度 56rpx
size String 分段器字体大小 28rpx
radius String 分段器圆角大小 4px
disabled Boolean 是否禁用 false

# Events

事件名 说明 回调参数
click 分段器item点击时触发 {index:item索引}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码