Tabs
Basic usage
Tab 1
Tab 2
Tab 3
Overview content with enough space to show the stretched tabs layout.
A disabled tab stays visible while other labels keep equal width.
Details content for the selected tab.
<script setup lang="ts">
import { NmorphTabPane, NmorphTabs } from "@nmorph/nmorph-ui-kit";
const activeTab = ref("tab-1");
const customActiveTab = ref("tab-1");
const tabs = ref([
{
name: "tab-1",
label: "Tab 1",
content: "Overview content with enough space to show the stretched tabs layout.",
},
{
name: "tab-2",
label: "Tab 2",
content: "A disabled tab stays visible while other labels keep equal width.",
disabled: true,
},
{
name: "tab-3",
label: "Tab 3",
content: "Details content for the selected tab.",
},
]);
</script><template>
<div class="tabs-basic-usage-overview">
<div class="elements">
<div class="elements__element">
<NmorphTabs v-model="customActiveTab" :stretch="true">
<NmorphTabPane v-for="tab in tabs" :key="tab.name" v-bind="tab">
<template #label="{ scope }">
<div v-if="scope.name === 'tab-2'">Custom label</div>
<div v-else>{{ scope.label }}</div>
</template><template #default="{ scope }">
<div class="tabs-basic-usage-overview__content">
<strong>Custom content for {{ scope.name }}</strong>
<span>{{ scope.content }}</span>
</div>
</template>