渲染tabs的Vue组件 – vue-tabs-component
A Vue component to easily render tabs
The package contains a Vue
component to easily display some tabs.
This is how they can be used:
<div>
<tabs>
<tab name="First tab">
This is the content of the first tab
</tab>
<tab name="Second tab">
This is the content of the second tab
</tab>
<tab id="oh-hi-mark" name="Custom fragment">
The fragment that is appended to the url can be customized
</tab>
<tab prefix="<span class='glyphicon glyphicon-star'></span> "
name="Prefix and suffix"
suffix=" <span class='badge'>4</span>">
A prefix and a suffix can be added
</tab>
</tabs>
</div>
When reloading the page the component will automatically display the tab that was previously opened
.
The rendered output adheres to the ARIA specification
.
Demo
You can see a demo here: http://vue-tabs-component.spatie.be
Postcardware
You’re free to use this package (it’s MIT-licensed
), but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
All postcards are published on our website
.
Installation
You can install the package via yarn:
yarn add vue-tabs-component
or npm:
npm install vue-tabs-component --save
Usage
The most common use case is to register the component globally.
//in your app.js or similar file
import Vue from 'vue';
import {Tabs, Tab} from 'vue-tabs-component';
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);
On your page you can now use html like this to render tabs:
<div>
<tabs>
<tab name="First tab">
First tab content
</tab>
<tab name="Second tab">
Second tab content
</tab>
<tab name="Third tab">
Third tab content
</tab>
</tabs>
</div>
By default it will show the first tab.
If you click on a tab ahrefrepresentation of the name will be append to the url. For example clicking on the tabSecond tabwill append#second-tabto the url.
When loading a page with a fragment that matches thehrefof a tab, it will open up that tab. For example visiting/#third-tabwill open up the tab with nameThird tab.
Remembering the last opened tab
By default the component will remember which was the last open tab for 5 minutes . If you for instance click onThird taband then visit/the third tab will be opened.
You can change the cache life time by passing the lifetime in minutes in thecache-lifetimeproperty of thetabscomponent.
<tabs cache-lifetime="10">
...
</tabs>
Adding a suffix and a prefix to the tab name
You can add a suffix and a prefix to the tab by using thesuffixandprefixattributes.
<tab prefix="my prefix - " name="First tab" suffix=" - my suffix">
First tab content
</tab>
The title of the tab will now bemy prefix – First tab – my suffix.
The fragment that’s added to the url when clicking the tab will only be based on thenameof a tab, thename-prefixandname-suffixattributes will be ignored.
Customizing fragments
When clicking on a tab it’s name will be used as a fragment in the url. For example clicking on theSecond tabwill append#second-tabto the current url.
You can customize that fragment by using theidattribute.
<div>
<tabs>
<tab id="custom-fragment" name="My tab">
First tab content
</tab>
</tabs>
</div>
Clicking onMy tabwill then append#custom-fragmentto the url.