Tab

A simple vue tab component.

GitHub

Demo

Slot Based

Overview panel content.

Define content per tab with #panel-* slots.

Great DX when panel content is mostly custom markup.

Disabled Tabs

Overview panel content.

Define content per tab with #panel-* slots.

Great DX when panel content is mostly custom markup.

Vertical Slot Based

Start with basics to understand the slot contract.

Use #tab-* and #panel-* named slots.

Vertical tabs are useful for dense content layouts.

With Custom Tab Markup

Messages

Unread and recent conversations are shown in this panel.

Active tab id: messages

Mentions panel highlights updates that need your attention.

Archive keeps historical activity and closed threads.

Install

npm i @vuesimple/vs-tab

Usage

<template>
  <vs-tab v-model="selectedTab" :disabled-items="['usage']">
    <template #tab-overview>Overview</template>
    <template #tab-usage>Usage</template>
    <template #tab-activity>Activity</template>

    <template #panel-overview>
      <p>Overview panel content.</p>
    </template>
    <template #panel-usage>
      <p>Define content per tab with <code>#panel-*</code> slots.</p>
    </template>
    <template #panel-activity>
      <p>Great DX when panel content is mostly custom markup.</p>
    </template>
  </vs-tab>
</template>

<script>
  import VsTab from '@vuesimple/vs-tab';

  export default {
    components: {
      VsTab,
    },
    data() {
      return {
        selectedTab: 'overview',
      };
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-tab@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

// Main/Entry file
app.use(VsTab.plugin);

Props

Name	Type	Default	Description
model-value	String/Number/Object	-	Active tab id (supports v-model)
is-vertical	Boolean	false	Stacks tabs vertically
orientation	String	horizontal	Orientation mode (horizontal, vertical)
activation	String	auto	Keyboard behavior (auto or manual)
aria-label	String	Tab	Accessible label for tablist
disabled-items	Array	[]	Tab ids that should be disabled (['usage'])

Events

Name	Description
update:modelValue	Emitted when selected tab changes
change	Emitted as (selectedItem, selectedTab)

Slots

Name	Description
tab-<item>	Named tab slot for a specific tab (tab-overview)
panel-<item>	Named panel slot for a specific panel (panel-overview)

VsTab is slot-based only and derives tab ids from tab-* / panel-* slot names.