@hiendv/vue-tabs

@hiendv/vue-tabs

Lightweight and flexible tabs component for the web

Features

• Template-first approach
• Beautiful modulized themes included
• Individual panel styling
• Easy positioning
• Accessible navigation with hash fragment
• Octicons support
• 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 !