# t-subsection-item

SubsectionItem 分段项

t-subsection-item 组件介绍

t-subsection-item 是分段器的子组件，用于定义分段器中的选项项，必须配合 t-subsection 使用。

t-subsection-item 平台兼容

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

t-subsection-item 基础用法

基础用法参考 demo/subsection/subsection.uvue，作为 t-subsection 的子组件使用。

<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-item Props

属性名	说明	类型	默认值
value	当前选项的值	number	0
title	标题	string	''
icon	图标名称	string	''
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	''
size	组件尺寸	string	''

t-subsection-item Slots

插槽名	说明
default	默认插槽，自定义选项内容