Repository files navigation

The package contains aVue component to easily display some tabs.

<div><tabs:options="{ useUrlFragment: false }"@clicked="tabClicked"@changed="tabChanged"><tabname="First tab">            This is the content of the first tab</tab><tabname="Second tab">            This is the content of the second tab</tab><tabname="Disabled tab":is-disabled="true">            This content will be unavailable while :is-disabled prop set to true</tab><tabid="oh-hi-mark"name="Custom fragment">            The fragment that is appended to the url can be customized</tab><tabprefix="<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 automaticallydisplay the tab that was previously opened.

The rendered output adheres tothe ARIA specification.

You can see a demo here:http://vue-tabs-component.spatie.be

You can install the package via yarn:

yarn add vue-tabs-component

or npm:

npm install vue-tabs-component --save

The most common use case is to register the component globally.

//in your app.js or similar fileimportVuefrom'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:

importTabsfrom'vue-tabs-component';Vue.use(Tabs);

On your page you can now use html like this to render tabs:

<div><tabs><tabname="First tab">            First tab content</tab><tabname="Second tab">            Second tab content</tab><tabname="Third tab">            Third tab content</tab></tabs></div>

By default it will show the first tab.

If you click on a tab ahref representation of the name will be append to the url. For example clicking on the tabSecond tab will append#second-tab to the url.

When loading a page with a fragment that matches thehref of a tab, it will open up that tab. For example visiting/#third-tab will open up the tab with nameThird tab.

By default the component will remember which was the last open tab for 5 minutes . If you for instance click onThird tab and then visit/ the third tab will be opened.

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

<tabscache-lifetime="10">  ...</tabs>

When using with other libraries that use the url fragment, you can disable modifying the url fragment by passing theuseUrlFragment options. This helps using it with vue-router, or using vue-tabs-component twice in the same page.

<tabs:options="{ useUrlFragment: false }">  ...</tabs>

Tabs has two events to which you can bind:changed andclicked

<tabs@clicked="tabClicked"@changed="tabChanged">  ...</tabs>

exportdefault{    ...methods:{        ...tabClicked(selectedTab){console.log('Current tab re-clicked:'+selectedTab.tab.name);},tabChanged(selectedTab){console.log('Tab changed to:'+selectedTab.tab.name);},        ...}}

changed is emitted when the tab changes and can be used as handle to load data on request.clicked is emitted when an active tab is re-clicked and can be used to e.g. reload the data in the current tab.

You can add a suffix and a prefix to the tab by using thesuffix andprefix attributes.

<tabprefix="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 thename of a tab, thename-prefix andname-suffix attributes will be ignored.

When clicking on a tab it's name will be used as a fragment in the url. For example clicking on theSecond tab will append#second-tab to the current url.

You can customize that fragment by using theid attribute.

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

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

When disabling the cache, it can be useful to specify a default tab to load which is not the first one. You can select this by passing thedefaultTabHash option.

<tabs:options="{ defaultTabHash: 'second-tab' }"><tabid="first-tab"name="First tab">        First tab content</tab><tabid="second-tab"name="Default tab">        Second tab content</tab></tabs>

You can use theCSS from the docs as a starting point for your own styling.The output HTML has namespaced classes to target all nodes directly.

<divclass="tabs-component"><ulclass="tabs-component-tabs"><liclass="tabs-component-tab"><aclass="tabs-component-tab-a">…</a></li></ul><divclass="tabs-component-panels"><sectionclass="tabs-component-panel">            …</section></div></div>

Please seeCHANGELOG for more information what has changed recently.

$ yarntest

Please seeCONTRIBUTING for details.

If you discover any security related issues, please contactFreek Van der Herten instead of using the issue tracker.

You're free to use this package, 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.

We publish all received postcardson our company website.

• Freek Van der Herten
• Willem Van Bockstal
• Sebastian De Deyne
• All Contributors

This package is based on the solution presented byJeffrey Way in thepractical example #3 video in theVue series onLaracasts

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projectson our website.

Does your business depend on our contributions? Reach out and support us onPatreon.All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.

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