doc(Tabs/TabMenu): add missing Tabs component to sample code
parent
3efe61c605
commit
40e42c1f69
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue