Tabs

Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.

For Tabs to function correctly they must include corresponding Tab and Tab Panel components.

Label

The label attribute on the Tab component provides the Tab with label text.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs>
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Icon

Use the icon slot to add an icon from the icon library to the Tab component.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs>
    <VTab label="Comments"
      ><template #icon><VIcon name="chat-line" /></template
    ></VTab>
    <VTab label="Playlist"
      ><template #icon><VIcon name="playlist-line" /></template
    ></VTab>
    <VTab label="Favourites"
      ><template #icon><VIcon name="star-line" /></template
    ></VTab>
    <VTabPanel>Comments</VTabPanel>
    <VTabPanel>Playlist</VTabPanel>
    <VTabPanel>Favourites</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Comments">
    <vwc-icon slot="icon" name="chat-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab label="Playlist">
    <vwc-icon slot="icon" name="playlist-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab label="Favourites">
    <vwc-icon slot="icon" name="star-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab-panel>Comments</vwc-tab-panel>
  <vwc-tab-panel>Playlist</vwc-tab-panel>
  <vwc-tab-panel>Favourites</vwc-tab-panel>
</vwc-tabs>

Icon Trailing

The icon-trailing attribute on the Tab component positions the icon after the label text.

<script setup lang="ts">
import { VIcon, VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs>
    <VTab icon-trailing label="Comments">
      <template #icon><VIcon name="chat-line" /></template>
    </VTab>
    <VTab icon-trailing label="Playlist">
      <template #icon><VIcon name="playlist-line" /></template>
    </VTab>
    <VTab icon-trailing label="Favourites">
      <template #icon><VIcon name="star-line" /></template>
    </VTab>
    <VTabPanel>Comments</VTabPanel>
    <VTabPanel>Playlist</VTabPanel>
    <VTabPanel>Favourites</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab icon-trailing label="Comments">
    <vwc-icon slot="icon" name="chat-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab icon-trailing label="Playlist">
    <vwc-icon slot="icon" name="playlist-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab icon-trailing label="Favourites">
    <vwc-icon slot="icon" name="star-line"></vwc-icon>
  </vwc-tab>
  <vwc-tab-panel>Comments</vwc-tab-panel>
  <vwc-tab-panel>Playlist</vwc-tab-panel>
  <vwc-tab-panel>Favourites</vwc-tab-panel>
</vwc-tabs>

Removable

The removable attribute on the Tab component adds a close button to the tab.

Clicking the close button or pressing the DELETE key when focussed on the tab will emit the close event.

Triggering the close event does not automatically close the tab and tab panel. This needs to be handled in the consuming application as in the example below.

The consuming application must also handle whether the user can close all the tabs or not.

<script setup lang="ts">
import { ref } from 'vue';
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';

interface TabItem {
id: string;
label: string;
content: string;
}

const tabs = ref<TabItem[]>([
{ id: 'tab-1', label: 'Tab one', content: 'Tab one content' },
{ id: 'tab-2', label: 'Tab two', content: 'Tab two content' },
{ id: 'tab-3', label: 'Tab three', content: 'Tab three content' },
]);

function handleClose(e: Event) {
const tabId = (e.target as HTMLElement).id;
tabs.value = tabs.value.filter((tab) => tab.id !== tabId);
}

</script>

<template>
  <VTabs v-if="tabs.length" @close="handleClose">
    <template v-for="tab in tabs" :key="tab.id">
      <VTab :label="tab.label" :id="tab.id" removable />
      <VTabPanel v-text="tab.content" />
    </template>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Tab one" removable></vwc-tab>
  <vwc-tab label="Tab two" removable></vwc-tab>
  <vwc-tab label="Tab three" removable></vwc-tab>
  <vwc-tab-panel>Tab one content</vwc-tab-panel>
  <vwc-tab-panel>Tab two content</vwc-tab-panel>
  <vwc-tab-panel>Tab three content</vwc-tab-panel>
</vwc-tabs>

<script>
  document.querySelector('vwc-tabs').addEventListener('close', (e) => {
    const tab = e.srcElement;
    const tabs = tab.parentElement;
    const tabPanelId = tab.getAttribute('aria-controls');
    const tabPanel = document.getElementById(tabPanelId);
    if (tabs.querySelectorAll('vwc-tab').length === 1) {
      tabs.remove();
      return;
    }
    if (tabPanel) {
      tabPanel.remove();
      e.srcElement.remove();
    }
  });
</script>

Disabled

The disabled attribute on the Tab component disables the Tab.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs>
    <VTab label="Tab one" />
    <VTab disabled label="Disabled tab" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab disabled label="Disabled tab"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Shape

The shape attribute on the Tab component controls the style of the background in hover state. It can be rounded or shape.

The shape variations should not be used in the tab set of tabs. The example above is for demonstration purposes only.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs>
    <VTab shape="rounded" label="Rounded" />
    <VTab shape="sharp" label="Sharp" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab shape="rounded" label="Rounded"></vwc-tab>
  <vwc-tab shape="sharp" label="Sharp"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
</vwc-tabs>

Orientation

The orientation attribute on the Tabs component controls which axis the tabs are aligned. Below is an example of vertical alignment.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs orientation="vertical">
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs orientation="vertical">
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Connotation

Use the connotation attribute on the Tabs component to control the color of the active tab. Below it is set to cta.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs connotation="cta">
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs connotation="cta">
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Active ID

Use the activeid attribute on the Tabs component to control which tab is active on first render. The activeid attribute must match an id given to the Tab component.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs activeid="tab-2">
    <VTab label="Tab one" id="tab-1" />
    <VTab label="Tab two" id="tab-2" />
    <VTab label="Tab three" id="tab-3" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs activeid="tab-2">
  <vwc-tab label="Tab one" id="tab-1"></vwc-tab>
  <vwc-tab label="Tab two" id="tab-2"></vwc-tab>
  <vwc-tab label="Tab three" id="tab-3"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Gutters

Use the gutters attribute on the Tabs component to control the spacing inside the Tab Panels. It can be set to small (default) or none (demonstrated in the example below).

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs gutters="none">
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs gutters="none">
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Tabs Layout

The tabs-layout attribute on the Tabs component controls the tabs layout. When set to stretch, the tabs will stretch to fill the available space. It will have no effect when the tabs are in a vertical orientation.

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs tabs-layout="stretch">
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<vwc-tabs tabs-layout="stretch">
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

Scrollable Panel

Use the scrollable-panel attribute combined with setting a block-size style to the Tabs component to make the content scrollable.

Horizontal

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs class="tabs" scrollable-panel>
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>
      <ol>
        <li>Stuffed artichokes</li>
        <li>Bruschetta</li>
        <li>Oven-baked polenta</li>
        <li>Salami and Fig Crostini with Ricotta</li>
        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
        <li>Stuffed artichokes</li>
        <li>Bruschetta</li>
        <li>Oven-baked polenta</li>
        <li>Salami and Fig Crostini with Ricotta</li>
        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
      </ol>
    </VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<style>
.tabs {
  block-size: 200px;
}
</style>

<vwc-tabs class="tabs" scrollable-panel>
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>
    <ol>
      <li>Stuffed artichokes</li>
      <li>Bruschetta</li>
      <li>Oven-baked polenta</li>
      <li>Salami and Fig Crostini with Ricotta</li>
      <li>Rosemary-Potato Focaccia with Goat Cheese</li>
      <li>Stuffed artichokes</li>
      <li>Bruschetta</li>
      <li>Oven-baked polenta</li>
      <li>Salami and Fig Crostini with Ricotta</li>
      <li>Rosemary-Potato Focaccia with Goat Cheese</li>
    </ol>
  </vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

<style>
  .tabs {
    block-size: 200px;
  }
</style>

Vertical

<script setup lang="ts">
import { VTab, VTabs, VTabPanel } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTabs scrollable-panel orientation="vertical" class="tabs">
    <VTab label="Tab one" />
    <VTab label="Tab two" />
    <VTab label="Tab three" />
    <VTabPanel>
      <ol>
        <li>Stuffed artichokes</li>
        <li>Bruschetta</li>
        <li>Oven-baked polenta</li>
        <li>Salami and Fig Crostini with Ricotta</li>
        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
        <li>Stuffed artichokes</li>
        <li>Bruschetta</li>
        <li>Oven-baked polenta</li>
        <li>Salami and Fig Crostini with Ricotta</li>
        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
      </ol>
    </VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

<style>
.tabs {
  block-size: 150px;
}
</style>

<vwc-tabs scrollable-panel orientation="vertical" class="tabs">
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab label="Tab three"></vwc-tab>
  <vwc-tab-panel>
    <ol>
      <li>Stuffed artichokes</li>
      <li>Bruschetta</li>
      <li>Oven-baked polenta</li>
      <li>Salami and Fig Crostini with Ricotta</li>
      <li>Rosemary-Potato Focaccia with Goat Cheese</li>
      <li>Stuffed artichokes</li>
      <li>Bruschetta</li>
      <li>Oven-baked polenta</li>
      <li>Salami and Fig Crostini with Ricotta</li>
      <li>Rosemary-Potato Focaccia with Goat Cheese</li>
    </ol>
  </vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel three</vwc-tab-panel>
</vwc-tabs>

<style>
  .tabs {
    block-size: 150px;
  }
</style>