Skip to content
On this page

tabs

actually two components



Selected Tab:

active tab via index

tab bodies

template

html
<bunt-tabs class="tabs-default" :active-tab="activeTab">
	<bunt-tab id="Tab 1" header="Tab 1" @selected="activeTab = 'Tab 1'" />
	<bunt-tab id="Tab 2" header="Tab 2" @selected="activeTab = 'Tab 2'" />
	<bunt-tab id="longer Heading" header="A longer Tab Heading" @selected="activeTab = 'longer Heading'" />
</bunt-tabs>
<p>Selected Tab: {{ activeTab }}</p>
<h4>active tab via index</h4>
<bunt-tabs class="tabs-default" :active-tab="1">
	<bunt-tab header="Tab 1" />
	<bunt-tab header="Tab 2" />
	<bunt-tab header="A longer Tab Heading" />
</bunt-tabs>
<h4>tab bodies</h4>
<bunt-tabs class="tabs-default" :active-tab="'one'">
	<bunt-tab id="one" header="Tab 1">
		<h1>I AM A TAB</h1>
	</bunt-tab>
	<bunt-tab id="two" header="Tab 2">
		<h1> I AM ANOTHER TAB</h1>
	</bunt-tab>
	<bunt-tab id="three" header="A longer Tab Heading" />
</bunt-tabs>
<bunt-tabs class="tabs-default" :active-tab="1">
	<bunt-tab header="Tab 1" />
	<bunt-tab v-if="activateTab" header="A dynamic Tab Heading" />
	<bunt-tab header="Tab 2" />
</bunt-tabs>
<bunt-switch id="switch-tabs" name="switch-tabs" label="toggle tab" v-model="activateTab" />

style

stylus
.tabs-default
	tabs-style()

bunt-tabs

props

proptyperequireddefaultdescription
activeTabnumber|stringtrueactive tab id

slots

slotdescription
defaultput bunt-tab components here
headerItemcustomize header item rendering. Receives the tab id and the header object.

bunt-tab

props

proptyperequireddefaultdescription
idstringfalsetab id used in bunt-tabs' active-tab
headerstring, objecttrueheader label. If you're using the headerItem slot, you can pass an object to it here.
iconstringfalsemdi icon name
disabledbooleanfalsefalsedisables input

slots

slotdescription
defaulttab body

events

eventargsdescription
selectedidemitted when tab is selected
deselectedidemitted when tab is deselected

style mixin parameters

parametertypedefaultdescription
background-colorcolor$clr-grey-200background color
colorcolor$clr-secondary-text-lightheader text color
active-colorcolor$clr-primaryactive header text color
indicator-colorcolor$clr-primaryindicator color

Released under the MIT License.