Tabs
A set of layered sections of content that are displayed one at a time.
Tab bar
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Tab, TabsBar } from '@youcan/ui-vue3';
const activeTab = ref(0);
function setActiveTab(id: number) {
activeTab.value = id;
}
</script>
<template>
<div class="tab-group">
<ul class="tab-list">
<TabsBar>
<Tab
label="For You"
:active="activeTab === 0"
@click="setActiveTab(0)"
/>
<Tab
label="Following"
:active="activeTab === 1"
@click="setActiveTab(1)"
/>
</TabsBar>
</ul>
<div class="tab-panels">
<div
v-show="activeTab === 0"
class="panel"
>
<p>Tab content</p>
</div>
<div
v-show="activeTab === 1"
class="panel"
>
<p>Tab content 2</p>
</div>
</div>
</div>
</template>
API Reference
Tabs
Usage
vue
<script setup lang="ts">
import { ref } from 'vue';
import { Tab } from '@youcan/ui-vue3';
const activeTab = ref(0);
function setActiveTab(id: number) {
activeTab.value = id;
}
</script>
<template>
<TabsBar>
<Tab
label="For You"
:active="activeTab === 0"
@click="setActiveTab(0)"
/>
<Tab
label="Following"
:active="activeTab === 1"
@click="setActiveTab(1)"
/>
</TabsBar>
</template>