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

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:渲染tabs的Vue组件 – vue-tabs-component