0.12.6 • Published 3 years ago
@hiendv/vue-tabs v0.12.6
@hiendv/vue-tabs
Lightweight and flexible tabs component for the web :zap:
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 !
0.12.6
3 years ago
0.12.5
3 years ago
0.3.10
4 years ago
0.3.9
4 years ago
0.3.8
4 years ago
0.3.7
4 years ago
0.3.6
4 years ago
0.3.5
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
4 years ago
0.3.0
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.2
5 years ago