Modern Customizable Tabbed Interface – Super Vue 3 Tabs

A Vue 3 tabs component to add a stylish, dynamic, customizable tabbed interface to your Vue apps.

How to use it:

1. Import the needed components into your project.

import { Tabs, Tab } from 'super-vue3-tabs';

2. Add a tabbed interface to the template.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <p>Tab 1</p>
    </Tab>
    <Tab :disabled="true" value="Tab 2">
      <p>TTab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <p>Tab 3</p>
    </Tab>
  </Tabs>
</template>

3. Add custom icons to tabs using the icon slot.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <template #icon>
        Any Icon Here
      </template>
      <p>Tab 1</p>
    </Tab>
    <Tab :disabled="true" value="Tab 2">
      <template #icon>
        Any Icon Here
      </template>
      <p>TTab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <template #icon>
        Any Icon Here
      </template>
      <p>Tab 3</p>
    </Tab>
  </Tabs>
</template>

4. Available component props.

// tabs props
themeColor: "#3b82f6",

// tab props
id?: string;
value: string;
disabled?: boolean;

5. Events.

  • @change: when the current tab has changed.

Preview:

Super Vue 3 Tabs

Download Details:

Author: mdsaban

Live Demo: https://mdsaban.com/packages/super-vue3-tabs-component/demo/

Download Link: https://github.com/mdsaban/super-vue3-tabs/archive/refs/heads/main.zip

Official Website: https://github.com/mdsaban/super-vue3-tabs

Install & Download:

# Yarn
$ yarn add super-vue3-tabs

# NPM
$ npm install super-vue3-tabs
Tags:

Add Comment