Tabs

<script lang="ts" setup>
import { NNTabs } from "@fronntui/vue";
</script>
<template>
  <NNTabs
    :active="activeTab"
    :tabs="['Tab 1', 'Tab 2', 'Tab 3']"
    @activate="activeTab = $event"
  >
    <template #tab-0> Tab content 1 </template>
    <template #tab-1> Tab content 2 </template>
    <template #tab-2> Tab content 3 </template>
  </NNTabs>

  <hr />

  <NNTabs
    :active="activeTab"
    :tabs="['Tab 1', 'Tab 2', 'Tab 3']"
    @activate="activeTab = $event"
  />

  current tab is {{ activeTab }}
</template>

Props

Name

Type

tabs

string[]

List of tabs

active

number

Index of the active tab. Defaults to 0.

Events

Name

Payload

activate

number

Triggered after a tab has been actived.

Slots

Name

Payload

trigger-${i}

Tab content for each tab. i is the index in the list of the provided tabs.

Table Tag