Tabs

1<script setup lang="ts">2import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@vitral/vue';3import { ref } from 'vue';4 5const tab = ref<string | number>('recent');6const views = [7    { value: 'recent', label: 'Recent', body: 'Files you opened in the last week.' },8    { value: 'shared', label: 'Shared with me', body: 'Files other people gave you access to.' },9    { value: 'favorites', label: 'Favorites', body: 'Files you starred.' },10    { value: 'trash', label: 'Recycle bin', body: 'Deleted files, kept for 30 days.', disabled: true }11];12</script>13 14<template>15    <Tabs v-model:value="tab" style="width: 100%">16        <TabList aria-label="Files">17            <Tab v-for="v in views" :key="v.value" :value="v.value" :disabled="v.disabled">{{ v.label }}</Tab>18        </TabList>19        <TabPanels>20            <TabPanel v-for="v in views" :key="v.value" :value="v.value">21                <p style="margin: 0">{{ v.body }}</p>22            </TabPanel>23        </TabPanels>24    </Tabs>25    <small style="color: var(--vt-text-muted-color)">value: {{ tab }}</small>26</template>

1<script setup lang="ts">2import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@vitral/vue';3import { ref } from 'vue';4 5const vertical = ref<string | number>(0);6</script>7 8<template>9    <Tabs v-model:value="vertical" orientation="vertical" style="width: 100%">10        <TabList aria-label="Settings">11            <Tab :value="0">Account</Tab>12            <Tab :value="1">Notifications</Tab>13            <Tab :value="2">Billing</Tab>14        </TabList>15        <TabPanels>16            <TabPanel :value="0"><p style="margin: 0">Name, email and password.</p></TabPanel>17            <TabPanel :value="1"><p style="margin: 0">What to be told about, and where.</p></TabPanel>18            <TabPanel :value="2"><p style="margin: 0">Plan, invoices and payment method.</p></TabPanel>19        </TabPanels>20    </Tabs>21</template>

1<script setup lang="ts">2import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@vitral/vue';3</script>4 5<template>6    <Tabs value="a" :select-on-focus="false" lazy>7        <TabList aria-label="Manual">8            <Tab value="a">Overview</Tab>9            <Tab value="b">Activity</Tab>10            <Tab value="c">Members</Tab>11        </TabList>12        <TabPanels>13            <TabPanel value="a"><p style="margin: 0">Rendered only while selected (`lazy`).</p></TabPanel>14            <TabPanel value="b"><p style="margin: 0">Recent activity.</p></TabPanel>15            <TabPanel value="c"><p style="margin: 0">Who is in the project.</p></TabPanel>16        </TabPanels>17    </Tabs>18</template>