Tabs
Tabs are used to organize content by grouping similar information on the same page.
The <u-tabs> and <u-tab> components include the
recommended ARIA attributes for accessibility and provides full keyboard navigation control of
the tabs.
Default#
<template>
<section>
<u-tabs>
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</section>
</template>
States#
If you're reading this, something has gone terribly wrong...
<template>
<section>
<u-tabs>
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Active" active><dummy t="16,20"></dummy></u-tab>
<u-tab label="Disabled" disabled>
If you're reading this, something has gone terribly wrong...
</u-tab>
<u-tab label="Tab 4"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</section>
</template>
Align#
Start (Default)
Center
End
Fill
<template>
<section>
<h5 class="font-regular text-base md:text-lg leading-snug">Start (Default)</h5>
<u-tabs nav-align="start">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Center</h5>
<u-tabs nav-align="center">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">End</h5>
<u-tabs nav-align="end">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Fill</h5>
<u-tabs nav-align="fill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</section>
</template>
Start (Default)
Center
End
Fill
<template>
<section>
<h5 class="font-regular text-base md:text-lg leading-snug">Start (Default)</h5>
<u-tabs nav-align="start" nav-position="left" class="h-48">
<u-tab label="Tab 1"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="60,80"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Center</h5>
<u-tabs nav-align="center" nav-position="left" class="h-48">
<u-tab label="Tab 1"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="60,80"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">End</h5>
<u-tabs nav-align="end" nav-position="left" class="h-48">
<u-tab label="Tab 1"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="60,80"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Fill</h5>
<u-tabs nav-align="fill" nav-position="left" class="h-48">
<u-tab label="Tab 1"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="60,80"></dummy></u-tab>
</u-tabs>
</section>
</template>
Position#
Top (Default)
Bottom
Left
Right
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Top (Default)</h5>
<u-tabs>
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Bottom</h5>
<u-tabs nav-position="bottom">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Left</h5>
<u-tabs nav-position="left" class="h-40">
<u-tab label="Tab 1"><dummy t="24,30"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="24,30"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="24,30"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Right</h5>
<u-tabs nav-position="right" class="h-40">
<u-tab label="Tab 1"><dummy t="24,30"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="24,30"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="24,30"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Scrolling#
Horizontal
Vertical
<template>
<section>
<h5 class="font-regular text-base md:text-lg leading-snug">Horizontal</h5>
<u-tabs>
<u-tab label="Tab 1 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 4 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 5 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 6 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 7 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 8 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 9 Title"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 10 Title"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Vertical</h5>
<u-tabs nav-position="left" class="h-40">
<u-tab label="Tab 1 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 2 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 3 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 4 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 5 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 6 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 7 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 8 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 9 Title"><dummy t="60,80"></dummy></u-tab>
<u-tab label="Tab 10 Title"><dummy t="60,80"></dummy></u-tab>
</u-tabs>
</section>
</template>
Custom Tab label#
<template>
<section>
<u-tabs>
<template #settings>
<font-awesome-icon :icon="faUsersCog" />
<span class="ml-2">Settings</span>
</template>
<u-tab label-slot="settings"><dummy t="16,20"></dummy></u-tab>
<template #messages>
<font-awesome-icon :icon="faBellOn" />
<span class="mx-2">Messages</span>
<u-badge tone="primary" pulse>21</u-badge>
</template>
<u-tab label-slot="messages"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</section>
</template>
<script>
import { faBellOn, faUsersCog } from '@fortawesome/pro-duotone-svg-icons'
export default {
computed: {
faBellOn() {
return faBellOn
},
faUsersCog() {
return faUsersCog
},
},
}
</script>
Tones & Variants#
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="primary">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="primary" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="primary" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="primary" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="primary" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="primary" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="secondary">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="secondary" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="secondary" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="secondary" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="secondary" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="secondary" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="tertiary">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="tertiary" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="tertiary" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="tertiary" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="tertiary" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="tertiary" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="neutral">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="neutral" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="neutral" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="neutral" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="neutral" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="neutral" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="info">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="info" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="info" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="info" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="info" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="info" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="positive">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="positive" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="positive" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="positive" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="positive" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="positive" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="warning">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="warning" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="warning" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="warning" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="warning" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="warning" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Line: Horizontal
Line: Vertical
Tab: Horizontal
Tab: Vertical
Pill: Horizontal
Pill: Vertical
<template>
<section class="flex flex-wrap">
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Horizontal</h5>
<u-tabs tone="critical">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Line: Vertical</h5>
<u-tabs tone="critical" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Horizontal</h5>
<u-tabs tone="critical" variant="tab">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Tab: Vertical</h5>
<u-tabs tone="critical" variant="tab" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pr-3 md:w-full md:pr-0 lg:w-1/2 lg:pr-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Horizontal</h5>
<u-tabs tone="critical" variant="pill">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
<div class="w-full pb-6 sm:w-1/2 sm:pl-3 md:w-full md:pl-0 lg:w-1/2 lg:pl-3">
<h5 class="font-regular text-base md:text-lg leading-snug">Pill: Vertical</h5>
<u-tabs tone="critical" variant="pill" nav-position="left">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</div>
</section>
</template>
Sizes#
Extra Small
Small
Medium
Large
<template>
<section>
<h5 class="font-regular text-base md:text-lg leading-snug">Extra Small</h5>
<u-tabs size="xs">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Small</h5>
<u-tabs size="sm">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Medium</h5>
<u-tabs size="md">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<h5 class="font-regular text-base md:text-lg leading-snug">Large</h5>
<u-tabs size="lg">
<u-tab label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab label="Tab 3"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
</section>
</template>
Advanced#
v-model Support#
Use the <u-tabs> v-model to control which tab is active by setting the
v-model to the index (zero-based) of the tab to be shown.
If you're reading this, something has gone terribly wrong...
Current Index: 1
<template>
<section>
<u-tabs ref="tabs" v-model="tabIndex">
<u-tab id="tab1" label="Tab 1"><dummy t="16,20"></dummy></u-tab>
<u-tab id="tab2" label="Tab 2"><dummy t="16,20"></dummy></u-tab>
<u-tab id="tab3" label="Disabled Tab" disabled>
If you're reading this, something has gone terribly wrong...
</u-tab>
<u-tab id="tab4" label="Tab 4" active><dummy t="16,20"></dummy></u-tab>
<u-tab id="tab5" label="Tab 5"><dummy t="16,20"></dummy></u-tab>
</u-tabs>
<div class="text-center">
<div class="my-2">
<u-button @click="tabIndex--">Previous</u-button>
<u-button @click="tabIndex++">Next</u-button>
</div>
<div class="text-muted">Current Index: {{ tabIndex }}</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
tabIndex: 1,
}
},
}
</script>
Dynamic Tabs#
There are no open tabs
Open a new tab using the + button above.
Open a new tab using the + button above.
<template>
<section>
<u-tabs ref="tabs" nav-align="fill">
<!-- Render Tabs, supply a unique `key` to each tab -->
<u-tab v-for="i in tabs" :key="'dyn-tab-' + i" :label="'Tab ' + i">
<p>Tab Contents: {{ i }}</p>
<dummy t="16,20"></dummy>
<u-button size="sm" tone="critical" class="float-right" @click="closeTab(i)">
Close tab
</u-button>
</u-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<template v-slot:tabs-end>
<u-button tone="info" variant="ghost" square @click.prevent="newTab">+</u-button>
</template>
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br />
Open a new tab using the <b>+</b> button above.
</div>
</template>
</u-tabs>
</section>
</template>
<script>
export default {
data() {
return {
tabs: [],
tabCounter: 0,
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i] === x) {
this.tabs.splice(i, 1)
}
}
},
newTab() {
this.tabs.push(this.tabCounter++)
},
},
}
</script>