Tab
Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container.
Default Tab Example
vue
<template>
<div>
<TabGroup>
<TabList class="lg:space-x-8 md:space-x-4 space-x-0">
<Tab
v-slot="{ selected }"
as="template"
v-for="(item, i) in buttons"
:key="i"
>
<button
:class="[
selected
? 'text-primary-500 before:w-full'
: 'text-slate-500 before:w-0 dark:text-slate-300',
]"
class="text-sm font-medium mb-7 capitalize bg-white dark:bg-slate-800 ring-0 foucs:ring-0 focus:outline-none px-2 transition duration-150 before:transition-all before:duration-150 relative before:absolute before:left-1/2 before:bottom-[-6px] before:h-[1.5px] before:bg-primary-500 before:-translate-x-1/2"
>
{{ item.title }}
</button>
</Tab>
</TabList>
<TabPanels>
<TabPanel>
<div class="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate
aute id deserunt nisi.
</div>
</TabPanel>
<TabPanel>
<div class="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
</div>
</TabPanel>
<TabPanel>
<div class="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
</div>
</TabPanel>
<TabPanel>
<div class="text-slate-600 dark:text-slate-400 text-sm font-normal">
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate
aute id deserunt nisi.
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</template>
<script setup>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
const buttons = [
{
title: 'Home',
},
{
title: 'Profile',
},
{
title: 'Messages',
},
{
title: 'Settings',
},
];
</script>
Accordion
Accordions are useful when you need to organize lots of information in a vertically limited space. The headers let the user scan through main subjects of the content, and choose which of the subjects they would like to examine in depth by clicking on it. It's very useful for FAQs and complex contact forms.
Accordion Example
vue
<template>
<div>
<Accordion :items="items" parentClass="space-y-5" />
</div>
</template>
<script setup>
import Accordion from '@/components/Accordion';
export default {
components: { Accordion },
data() {
return {
items: [
{
title: 'How does Dashcode work?',
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
{
title: 'Where i can learn more about using Dashcode?',
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
{
title: 'Why Dashcode is so important?',
content:
"Jornalists call this critical, introductory section the and when bridge properly executed, it's the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.",
},
],
};
},
};
</script>