# t-subsection

Subsection 分段器

t-subsection 组件介绍

t-subsection 是分段器组件，用于多个选项卡切换，常用于订单状态切换、菜单切换等场景。

t-subsection 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-subsection 基础用法

基础用法参考 demo/subsection/subsection.uvue，配合 t-subsection-item 使用。

<template>
	<view class="p-15 ov">
		<tui-theme-switch></tui-theme-switch>
		<t-card title='Card 分段器'
				class="r-10 mb-15"
				sub-title="可用于订单场景+菜单切换"></t-card>
		<t-section title='基础功能-type-size'
				   class="r-10 mb-15"></t-section>
		<view :class="[`tvg tpm trl mb-5`]">
			<t-subsection :current="1"
						  class="mb-15 r-50 p-5"
						  bar-class="r-50"
						  size="medium">
				<t-subsection-item v-for="(item,index) in list"
								   :icon="item.icon"
								   :title="item.title"
								   :key="index"
								   :value="index"></t-subsection-item>
			</t-subsection>
			<t-subsection :current="1"
						  class="mb-15 r-5 p-8"
						  type='primary'
						  bar-class="r-50"
						  size="medium">
				<t-subsection-item v-for="(item,index) in list"
								   :icon="item.icon"
								   :title="item.title"
								   :key="index"
								   :value="index"></t-subsection-item>
			</t-subsection>
			<t-subsection :current="1"
						  class="mb-15 r-5 p-8"
						  type='success'
						  bar-class="r-50"
						  size="small">
				<t-subsection-item v-for="(item,index) in list"
								   :icon="item.icon"
								   :title="item.title"
								   :key="index"
								   :value="index"></t-subsection-item>
			</t-subsection>
			<t-subsection :current="1"
						  class="mb-15 r-5 p-8"
						  type='warning'
						  bar-class="r-50"
						  size="mini">
				<t-subsection-item v-for="(item,index) in list"
								   :icon="item.icon"
								   :title="item.title"
								   :key="index"
								   :value="index"></t-subsection-item>
			</t-subsection>
		</view>
		<t-section title='滑块样式'
				   :class="[`r-10 mb-15`]"></t-section>
		<t-subsection :current="1"
					  :class="[`mb-15 r-50 p-10 tvg`]"
					  type='primary'
					  bar-class="r-50">
			<t-subsection-item v-for="(item,index) in list"
							   :icon="item.icon"
							   :title="item.title"
							   :key="index"
							   :value="index"></t-subsection-item>
		</t-subsection>
		<t-subsection :current="1"
					  :class="[`r-5 p-8 tvg`]"
					  type='primary'
					  bar-class="r-5">
			<t-subsection-item v-for="(item,index) in list1"
							   :icon="item.icon"
							   :title="item.title"
							   :key="index"
							   :value="index"></t-subsection-item>
		</t-subsection>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	type SubsectionOption = {
		title ?: string
		icon ?: string
	}
	const list = ref<SubsectionOption[]>([
		{ title: '未付款' },
		{ title: '待评价' },
		{ title: '已付款' }
	])
	const list1 = ref<SubsectionOption[]>([
		{ icon: 'zhifubao', title: '未付款' },
		{ title: '待评价', icon: 'chat' },
		{ icon: 'red-packet', title: '已付款' }
	])
	const curNow = ref(1)
</script>

t-subsection Props

属性名	说明	类型	默认值
current	当前激活的选项索引	number	0
barClass	移动区域的样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'medium'

t-subsection Events

事件名	说明	回调参数
change	当选项卡改变时触发	index: number

t-subsection Slots

插槽名	说明
default	默认插槽，放置 t-subsection-item 子组件