渲染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.