Tabs

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

import '@vonage/vivid/tabs';
import '@vonage/vivid/tab';
import '@vonage/vivid/tab-panel';

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

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

<script setup lang="ts">
	import { VTabs, VTab, VTabPanel } from '@vonage/vivid-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>

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

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.

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.

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

Properties

Slots

Events

Properties

Slots

Events

Slots