<template>
	<v-tabs v-model="selection">
		<v-tab><v-icon name="home" left /> Home</v-tab>
		<v-tab><v-icon name="notifications" left /> News</v-tab>
		<v-tab><v-icon name="help" left /> Help</v-tab>
	</v-tabs>

	<v-tabs-items>
		<v-tab-item>I'm the content for Home!</v-tab-item>
		<v-tab-item>I'm the content for News!</v-tab-item>
		<v-tab-item>I'm the content for Help!</v-tab-item>
	</v-tabs-items>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
	setup() {
		const selection = ref([]);
		return { selection };
	}
});
</script>

Props

Prop	Description	Default
`vertical`	Render the tabs vertically	`false`
`value`	v-model value for active selection	--

Events

Event	Description	Value
`input`	Update current selection	`readonly (string

Slots

Slot	Description	Data
default

CSS Variables

Variable	Default
`--v-tabs-underline-color`	`var(--foreground-normal)`