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);

Alternatively you can do this to register the components:

import Tabs from 'vue-tabs-component';

Vue.use(Tabs);

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 a href representation of the name will be append to the url. For example clicking on the tab Second tab will append #second-tab to the url.

When loading a page with a fragment that matches the href of a tab, it will open up that tab. For example visiting /#third-tab will open up the tab with name Third 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 on Third tab and then visit / the third tab will be opened.

You can change the cache life time by passing the lifetime in minutes in the cache-lifetime property of the tabs component.

<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 the suffix and prefix attributes.

<tab prefix="my prefix - " name="First tab" suffix=" - my suffix">
    First tab content
</tab>

The title of the tab will now be my prefix - First tab - my suffix.

The fragment that's added to the url when clicking the tab will only be based on the name of a tab, the name-prefix and name-suffix attributes 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 the Second tab will append #second-tab to the current url.

You can customize that fragment by using the id attribute.

<div>
    <tabs>
        <tab id="custom-fragment" name="My tab">
            First tab content
        </tab>
    </tabs>
</div>

Clicking on My tab will then append #custom-fragment to the url.

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

License

The MIT License (MIT). Please see License File for more information.