@hiendv/vue-tabs

Lightweight and flexible tabs component for the web :zap:

Features

• [x] Template-first approach
• [x] Beautiful modulized themes included
• [x] Individual panel styling
• [x] Easy positioning
• [x] Accessible navigation with hash fragment
• [x] Octicons support
• [x] Ghost tabs support

Demo

See https://hiendv.github.io/tabs

Installation & Usage

CDN

<script src="https://cdn.jsdelivr.net/npm/@hiendv/vue-tabs@latest/dist/iife.js" crossorigin="anonymous"></script>

Note: We recommend linking to a specific version number that you can update manually

console.log(vuetabs.themeDefault, vuetabs.themeDark)

Vue.component('tabs', vuetabs.Tabs)
Vue.component('tab', vuetabs.Tab)

NPM

npm install --save vue-tabs
# yarn add vue-tabs

<script>
import Vue from 'vue'
import { Tabs, Tab } from '@hiendv/vue-tabs'

new Vue({
  el: '#app',
  components: { Tabs, Tab }
})
</script>

<template>
  <tabs>
    <tab title="First">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </tab>

    <tab title="Second">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat.
    </tab>

    <tab title="Third">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur.
    </tab>
  </tabs>
</template>

Please see vue-tabs-example for a complete demonstration.

Documentation

Tabs

Props

| Property | Type | Required | Default | Description |-------|-------|-------|-------|-------| | theme | Object | No | themeDefault - @hiendv/tabs | Modulized style | show | Number | No | 0 | Initial active tab | keep-alive | Boolean | No | false | Keep the tab panel's state (New in 0.3.4+)

Methods

| Method | Arguments | Return | Description |-------|-------|-------|-------| | loadSlots | () | No | Manually reload the slots

Events

| Event | Arguments | Description |-------|-------|-------| | update:show | (index) | Current active tab

Slots

| Syntax (2.6.0+) | Props | Deprecated syntax |-------|-------|-------| | v-slot:nav="props" | { items: Array } | slot="nav" slot-scope="props"

Tab

Props

| Property | Type | Required | Default | Description |-------|-------|-------|-------|-------| | title | String | No | 'Title' | Tab title | icon | Object | No | Empty | Tab octicon - octicons-vue | hash | String | No | null | Unique hash fragment for easy boorkmark and navigation | end | Boolean | No | false | Push the tab and its following friends to the right | ghost | Boolean | No | false | Mark tab as a pure button

Slots

| Syntax (2.6.0+) | Props | Deprecated syntax |-------|-------|-------| | v-slot:nav="props" | { key: Number, class: Object, attrs: Object, on: Object } | slot="nav" slot-scope="props"

Development & Testing

Please check the Contributing Guidelines.

Contribution

Issues and PRs are welcome !