Subsection 分段器

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="分段器">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="基础用法" />
			<zk-subsection :list="['选项一', '选项二', '选项三']" :current.sync="current1" />
		</zk-theme>

		<!-- 边框模式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="边框模式" />
			<zk-subsection :list="['选项1', '选项2', '选项3']" :current.sync="current5" type="border" inactiveColor="#ff6b6b"
				active-color="#ff6b6b" margin="20rpx" :spacing="20" />
		</zk-theme>

		<!-- 分段器模式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="分段器模式" />
			<zk-subsection :list="['选项1', '选项2', '选项3']" :current.sync="current2" type="subsection" margin="20rpx" />
		</zk-theme>

		<!-- 胶囊模式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="胶囊模式" />
			<zk-subsection :list="['推荐', '最新', '热门']" :current.sync="current4" type="capsule" active-color="#ff6b6b"
				margin="20rpx" />
		</zk-theme>

		<!-- 分段器模式2 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="分段器模式" />
			<zk-subsection mode="subsection" :list="['今日', '本周', '本月']" :current.sync="current2" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="自定义颜色" />
			<zk-subsection :list="['未开始', '进行中', '已完成']" :current.sync="current3" active-color="#07c160"
				bg-color="#e8f7ed" />
		</zk-theme>

		<!-- 自定义字体大小 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="自定义字体大小" />
			<zk-subsection :list="['小号', '中号', '大号']" :current.sync="current4" :font-size="32" />
		</zk-theme>

		<!-- 禁用加粗 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="禁用加粗" />
			<zk-subsection :list="['选项一', '选项二', '选项三']" :current.sync="current5" :bold="false" />
		</zk-theme>

		<!-- 四个选项 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 40rpx 0" text="四个选项" />
			<zk-subsection :list="['春季', '夏季', '秋季', '冬季']" :current.sync="current6" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				current1: 0,
				current2: 0,
				current3: 0,
				current4: 0,
				current5: 0,
				current6: 0
			}
		}
	}
</script>

<style>

</style>