doc(Tabs/TabMenu): add missing Tabs component to sample code

pull/5838/head
Michael Meier 2024-05-31 11:17:41 +02:00 committed by Tuğçe Küçükoğlu
parent 3efe61c605
commit 40e42c1f69
1 changed files with 36 additions and 30 deletions

View File

@ -30,30 +30,34 @@ export default {
],
code: {
basic: `
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
<Tabs value="/dashboard">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
</Tabs>
`,
options: `
<template>
<div class="card">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
<Tabs value="/dashboard">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
</Tabs>
</div>
</template>
@ -75,16 +79,18 @@ export default {
composition: `
<template>
<div class="card">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
<Tabs value="/dashboard">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
</Tabs>
</div>
</template>