<template>
	<view class="w-body">
		<w-public />
		<w-navbar left-back fixed title="带数字的分段器"></w-navbar>

		<view style="padding: 2rem;">
			<x-tabs v-model="indexs[0]" />
			{{ indexs[0] }}
		</view>

		<view style="padding: 2rem;">
			<x-tabs v-model="indexs[1]" :tabs="list1" style="--size:1.3rem; --color: #00F;" />
			{{ indexs[1] }}
		</view>



		<view style="padding: 1rem; display: flex; justify-content: flex-end;">
			<view style="width: 80%;"><x-tabs v-model="indexs[2]" :tabs="list2" style="--size:0.6rem; --color: var(--w-success-dark-1); --num-color:#00f;" /></view>
			{{ indexs[2] }}
		</view>

		<view style="padding: 2rem;">
			<x-tabs v-model="indexs[2]" :tabs="list2" style="--size:.8rem; --border-radius: .2rem;" />
			{{ indexs[2] }}
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'

const indexs = ref([0, 0, 0, 0]);

const list1 = ["张三", "李四"];
const list2 = [{ lable: '张三', num: 9 }, '李四', { lable: '王五', num: 5 }];

</script>

<style lang="scss" scoped>
.w-body {
	--navbar-height: 44px;
	background-color: var(--w-bg);
	font-size: .9rem;
	min-height: 100vh;

}
</style>
