Tabs

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

Usage

<script setup lang="ts">
import { VTabs, VTab, VTabPanel } from '@vonage/vivid-api-vue';
</script>
<template>
  <VTabs>
    <VTab label="Tab one"></VTab>
    <VTab label="Tab two"></VTab>
    <VTab label="Tab three"></VTab>
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
    <VTabPanel>Tab Panel three</VTabPanel>
  </VTabs>
</template>

import { registerTabs, registerTab, registerTabPanel } from '@vonage/vivid-api';

registerTabs('your-prefix');
registerTab('your-prefix');
registerTabPanel('your-prefix');

<script type="module">
  import { registerTabs, registerTab, registerTabPanel } from '@vonage/vivid-api';
  registerTabs('your-prefix');
  registerTab('your-prefix');
  registerTabPanel('your-prefix');
</script>

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

Slots

Icon Slot

The icon slot on the Tab component can be used to display a custom icon. If set, the icon attribute is ignored.

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

<template>
  <VTabs>
    <VTab label="Tab one">
      <template #icon><VIcon name="check-circle-solid" connotation="success" /></template>
    </VTab>
    <VTab label="Tab two">
      <template #icon><VIcon name="close-circle-solid" connotation="alert" /></template>
    </VTab>
    <VTabPanel>Tab Panel one</VTabPanel>
    <VTabPanel>Tab Panel two</VTabPanel>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Tab one">
    <vwc-icon slot="icon" name="check-circle-solid" connotation="success"></vwc-icon>
  </vwc-tab>
  <vwc-tab label="Tab two">
    <vwc-icon slot="icon" name="close-circle-solid" connotation="alert"></vwc-icon>
  </vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
</vwc-tabs>

Action Items Slot

The action-items slot on the Tabs component can be used to add action items after the last Tab in the tabs bar.

In the example below, a Button is provided that adds a new Tab when clicked.

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

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

const tabs = ref<TabItem[]>([
{ label: 'Tab one', content: 'Tab Panel one' },
{ label: 'Tab two', content: 'Tab Panel two' },
]);

function addTab() {
tabs.value.push({
label: 'New tab',
content: 'New tab content',
});
}

</script>

<template>
  <VTabs>
    <template v-for="(tab, index) in tabs" :key="index">
      <VTab :label="tab.label" />
      <VTabPanel v-text="tab.content" />
    </template>
    <template #action-items>
      <VButton shape="pill" size="condensed" @click="addTab">
        <template #icon><VIcon name="plus-line" /></template>
      </VButton>
    </template>
  </VTabs>
</template>

<vwc-tabs>
  <vwc-tab label="Tab one"></vwc-tab>
  <vwc-tab label="Tab two"></vwc-tab>
  <vwc-tab-panel>Tab Panel one</vwc-tab-panel>
  <vwc-tab-panel>Tab Panel two</vwc-tab-panel>
  <vwc-button slot="action-items" shape="pill" size="condensed" onclick="addTab()">
    <vwc-icon slot="icon" name="plus-line"></vwc-icon>
  </vwc-button>
</vwc-tabs>

<script>
  function addTab() {
    const tab = document.createElement('vwc-tab');
    tab.label = 'New tab';
    document.querySelector('vwc-tabs').appendChild(tab);
    const tabPanel = document.createElement('vwc-tab-panel');
    tabPanel.textContent = 'New tab content';
    document.querySelector('vwc-tabs').appendChild(tabPanel);
  }
</script>

CSS Variables

Tabs Block Size

Use the --tabs-block-size CSS variable to set the block-size of the base element. When using Tabs inside flex structure, setting --tabs-block-size: 100% with flex:1 or with any specific block-size on Tabs will stretch the tabs to full height.

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

<template>
  <div class="wrapper">
    <VTabs scrollable-panel class="tabs">
      <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>
        <VEmptyState headline="No results" connotation="alert">
          <template #icon><VIcon name="error-solid" label="Error" /></template>
        </VEmptyState>
      </VTabPanel>
      <VTabPanel>Playlist</VTabPanel>
      <VTabPanel>Favourites</VTabPanel>
    </VTabs>
  </div>
</template>

<style>
body,
#app {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.tabs {
  --tabs-block-size: 100%;
  flex: 1;
  block-size: 100%;
}
.tabs::part(tab-panel) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

<div class="wrapper">
  <vwc-tabs scrollable-panel class="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>
      <vwc-empty-state headline="No results" connotation="alert">
        <vwc-icon slot="icon" name="error-solid" label="Error"></vwc-icon>
      </vwc-empty-state>
    </vwc-tab-panel>
    <vwc-tab-panel>Playlist</vwc-tab-panel>
    <vwc-tab-panel>Favourites</vwc-tab-panel>
  </vwc-tabs>
</div>

<style>
  body {
    height: 100%;
  }
  .wrapper {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }
  .tabs {
    --tabs-block-size: 100%;
    flex: 1;
    block-size: 100%;
  }
  .tabs::part(tab-panel) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>

CSS Parts

Tab Panel

Use the CSS part tab-panel to provide custom styling to the Tab Panel components.

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

<template>
  <VTabs class="tabs">
    <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>

<style>
.tabs::part(tab-panel) {
  background-color: var(--vvd-color-cta-50);
}
</style>

<vwc-tabs 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>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>

<style>
  .tabs::part(tab-panel) {
    background-color: var(--vvd-color-cta-50);
  }
</style>

API Reference

tabs

Properties

Property	Type	Description
activeid	`string`	Match with an `id` set on a Tab to mark it as active on initial load
activeindicator	`boolean`	Deprecated attribute. It has no effect.
connotation	`'accent' \| 'cta'`	Sets the connotation color of the active tab
gutters	`'none' \| 'small'`	Sets the spacing inside the Tab Panels
orientation	`'horizontal' \| 'vertical'`	The orientation
scrollablePanel	`boolean`	Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`)
tabsLayout	`'align-start' \| 'stretch'`	Controls the layout of the tabs.

Property	Type	Description
activeid	`string`	Match with an `id` set on a Tab to mark it as active on initial load
activeindicator	`boolean`	Deprecated attribute. It has no effect.
connotation	`'accent' \| 'cta'`	Sets the connotation color of the active tab
gutters	`'none' \| 'small'`	Sets the spacing inside the Tab Panels
orientation	`'horizontal' \| 'vertical'`	The orientation
scrollable-panel	`boolean`	Sets whether the Tab Panel will be scrollable (if content height exceeds `block-size`)
tabs-layout	`'align-start' \| 'stretch'`	Controls the layout of the tabs.

Slots

Name	Description
action-items	Slot for action items such as buttons or controls.
default	Default slot for tab and tab-panel elements.

Name	Description
action-items	Slot for action items such as buttons or controls.
default	Default slot for tab and tab-panel elements.

Events

Name	Type	Description
change	`CustomEvent<HTMLElement>`	Fires a custom 'change' event when a tab is clicked or during keyboard navigation

Name	Type	Description
change	`CustomEvent<HTMLElement>`	Fires a custom 'change' event when a tab is clicked or during keyboard navigation

Methods

Name	Params	Returns	Description
adjust	`adjustment: number`	`void`	Adjusts the active index by numerical increments. Only enabled tabs are considered.

tab

Properties

Property	Type	Description
connotation	`'accent' \| 'cta'`	The connotation the tab should have.
disabled	`boolean`	When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information.
iconTrailing	`boolean`	Indicates the icon affix alignment.
label	`string`	Indicates the tab's label.
removable	`boolean`	Adds a close button
shape	`'rounded' \| 'sharp'`	The shape the tab should have.
tabIndex	`number`

Property	Type	Description
connotation	`'accent' \| 'cta'`	The connotation the tab should have.
disabled	`boolean`	When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information.
icon-trailing	`boolean`	Indicates the icon affix alignment.
label	`string`	Indicates the tab's label.
removable	`boolean`	Adds a close button
shape	`'rounded' \| 'sharp'`	The shape the tab should have.
tabindex	`number`

Slots

Name	Description
icon	The preferred way to add an icon to the component.

Name	Description
icon	The preferred way to add an icon to the component.

tab-panel

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.