nb-tabs

This is a tabs component for Vue.js 3+.

Installation

yarn add @vlalg-nimbus/nb-navigation

npm install @vlalg-nimbus/nb-navigation

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbNavigationComponents from '@vlalg-nimbus/nb-navigation'
import "@vlalg-nimbus/nb-navigation/dist/style.css";

const app = createApp(App)
app.use(NbNavigationComponents)
app.mount('#app')

import NbNavigationComponents from '@vlalg-nimbus/nb-navigation'
import "@vlalg-nimbus/nb-navigation/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbNavigationComponents)
})

To use, simply call the component, in this case it will be NbTabs or nb-tabs.

<template>
  <NbTabs
    nb-id="tabs-1"
    :tabs="tabs"
    :active-tab="0"
    :disabled-tabs="[2]"
    tab-model="one"
  />
</template>

<template>
  <nb-tabs
    nb-id="tabs-1"
    :tabs="tabs"
    :active-tab="0"
  />
</template>

Preview & Playground

Select the component you want to edit/test

Props

Items with an (*) mean they are required

Theme Colors (Light)

Theme Colors (Dark)

Events

Slots

Per-tab content overrides the default {{ tab.label }}.

Notes

• In the current implementation, NbTabs renders the tab header and indicator only.
• The content rendering flow is external by design: use your own v-if rendering and react to the changed event (index/key) to display the active panel.
• When isScrollClass is true, the tabs header supports horizontal drag-to-scroll with mouse.