Subsection 分段器

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='分段器' class="p.30">
		<t-card title='Card 分段器' class="tdr.tdb-mb.30" sub-title="可用于订单场景+菜单切换"></t-card>
		<t-section title='基础功能(主题展示)' class="tdr-tdb-mb.30"></t-section>
		<t-subsection type="success" :list="list1" :current="curNow" class="mb.30" :border="true"></t-subsection>
		<t-subsection :list="list" :current="curNow" class="mb.30-r.100" :border="true"></t-subsection>
		<t-section title='不显示边框' class="tdr-tdb-mb.30"></t-section>
		<t-subsection :list="list" :current="1" class="mb.30" type='w'></t-subsection>
		<t-section title='滑块样式' class="tdr-tdb-mb.30"></t-section>
		<t-subsection :list="list" :current="1" class="mb.30-r.100-p.20" type='e' barClass='r.100-h.80%'></t-subsection>
		<t-section title='根节点样式' class="tdr-tdb-mb.30"></t-section>
		<t-subsection :list="list" :current="1" class="mb.30-r.100-p.20-h.40px" type='i'
			barClass='r.100-h.80%'></t-subsection>
		<t-section title='自定义颜色覆盖主题' class="tdr-tdb-mb.30"></t-section>
		<t-subsection :list="list" :current="1" class="mb.30-r.100-p.20-h.40px" type='i' active-color="blue"
			barClass='r.100-h.80%'></t-subsection>
	</t-page>
</template>

<script>
	import { TuiSubsectionOption } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				list: [{
					title: '未付款'
				}, {
					title: '待评价'
				}, {
					title: '已付款'
				}] as TuiSubsectionOption[],
				list1: [{
					icon: 'zhifubao',
					title: '未付款'
				}, {
					title: '待评价',
					icon: 'chat',
				}, {
					icon: 'red-packet',
					title: '已付款'
				}] as TuiSubsectionOption[],
				curNow: 1
			};
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
type	子章节类型	String	'p'	-
list	选项数据	TuiSubsectionOption[]	[]	-
current	当前激活的选项索引	Number	0	-
activeColor	激活的颜色	String	''	-
inactiveColor	未激活的颜色	String	''	-
border	是否有边框	Boolean	false	-
barClass	标签栏的类名	String	''	-

Events

事件名	描述	回调参数	版本
change	当选项卡改变时触发	(index: number)	-

Slots

名称	描述
-	-