# Tabs 标签页
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.
# Example
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
<template>
<div class="uiv">
<tabs>
<tab title="Home">
<p>
Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</p>
</tab>
<tab title="Profile">
<p>
Food truck fixie locavore, accusamus mcsweeney's marfa nulla
single-origin coffee squid. Exercitation +1 labore velit, blog
sartorial PBR leggings next level wes anderson artisan four loko
farm-to-table craft beer twee. Qui photo booth letterpress, commodo
enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum
PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus
mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente
labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
sustainable jean shorts beard ut DIY ethical culpa terry richardson
biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui
sapiente accusamus tattooed echo park.
</p>
</tab>
<tab title="@vue" group="Dropdown">
<p>
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table
readymade. Messenger bag gentrify pitchfork tattooed craft beer,
iphone skateboard locavore carles etsy salvia banksy hoodie helvetica.
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you
probably haven't heard of them, vinyl craft beer blog stumptown.
Pitchfork sustainable tofu synth chambray yr.
</p>
</tab>
<tab title="@bootstrap" group="Dropdown">
<p>
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art
party before they sold out master cleanse gluten-free squid scenester
freegan cosby sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh
DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral
locavore cosby sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan,
sartorial keffiyeh echo park vegan.
</p>
</tab>
</tabs>
</div>
</template>
# Disable tabs
Add disabled
to <tab>
to disable it.
Home tab.
Profile tab.
@vue tab.
@bootstrap tab.
<template>
<div class="uiv">
<tabs>
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile" disabled>
<p>Profile tab.</p>
</tab>
<tab title="@vue" group="Dropdown">
<p>@vue tab.</p>
</tab>
<tab title="@bootstrap" group="Dropdown" disabled>
<p>@bootstrap tab.</p>
</tab>
</tabs>
</div>
</template>
# Pull right
Add pull-right
to <tab>
to pull it right. A grouped tab will be pulled to right if one of its sub-tabs has this prop set to true
.
Home tab.
Profile tab.
@vue tab.
@bootstrap tab.
<template>
<div class="uiv">
<tabs>
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<tab title="@vue" group="Dropdown" pull-right>
<p>@vue tab.</p>
</tab>
<tab title="@bootstrap" group="Dropdown">
<p>@bootstrap tab.</p>
</tab>
</tabs>
</div>
</template>
# Justified style
Add justified
to <tabs>
to apply justified style.
Home tab.
Profile tab.
Others tab.
<template>
<div class="uiv">
<tabs justified>
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<tab title="Others">
<p>Others tab.</p>
</tab>
</tabs>
</div>
</template>
# Pills style
Add pills
to <tabs>
to apply pills style.
Pills are also vertically stackable by adding stacked
, but if you want the nav and content parts to have layout such as 2 column, you may need some custom CSS apply to them.
Home tab.
Profile tab.
Others tab.
<template>
<div class="uiv">
<tabs pills>
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<tab title="Others">
<p>Others tab.</p>
</tab>
</tabs>
</div>
</template>
# Custom titles
With title
slot you can place any content inside nav tabs.
This tab has a title
slot.
This tab has a normal title.
<template>
<div class="uiv">
<tabs>
<tab>
<div slot="title"><i class="glyphicon glyphicon-user"></i> Profile</div>
<p>This tab has a <code>title</code> slot.</p>
</tab>
<tab title="Title">
<p>This tab has a normal title.</p>
</tab>
</tabs>
</div>
</template>
# With callbacks
Home tab.
Profile tab.
This tab has HTML title and callback function!
<template>
<div class="uiv">
<tabs @change="onChange">
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<tab>
<div slot="title"><i class="glyphicon glyphicon-bell"></i> Alert!</div>
<p>This tab has HTML title and callback function!</p>
</tab>
</tabs>
</div>
</template>
<script>
export default {
methods: {
onChange(index) {
if (index === 2) {
window.alert('You clicked on a tab that has callback function!')
}
},
},
}
</script>
# With nav-right
slot
Home tab.
Profile tab.
<template>
<div class="uiv">
<tabs>
<tab title="Home">
<p>Home tab.</p>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<form slot="nav-right">
<select class="form-control" style="display: inline-block; width: auto">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<btn type="success">Button</btn>
</form>
</tabs>
</div>
</template>
# Dynamic tabs
An example that generate closable tabs using v-for
:
Dynamic Tab 1
<template>
<section class="uiv">
<tabs v-model="index">
<tab v-for="tab in tabs" :key="tab" :title="tab">
<p>Dynamic {{ tab }}</p>
<btn @click="close">Close this tab</btn>
</tab>
<template slot="nav-right">
<btn size="sm" @click="push">
<i class="glyphicon glyphicon-plus"></i> Add
</btn>
</template>
</tabs>
</section>
</template>
<script>
export default {
data() {
return {
tabs: ['Tab 1'],
count: 1,
index: 0,
}
},
methods: {
push() {
this.tabs.push(`Tab ${++this.count}`)
// open the new tab after created
this.$nextTick(() => {
this.index = this.tabs.length - 1
})
},
close() {
this.tabs.splice(this.index, 1)
// select prev tab if the closed tab is the last one
if (this.index === this.tabs.length && this.index > 0) {
--this.index
}
},
},
}
</script>
# Validate before change
In case you need to validate something inside a tab before it being switch, a sample implementation using before-change
event:
Profile tab.
Others tab.
<template>
<section class="uiv">
<tabs v-model="index" @before-change="onBeforeChange">
<tab title="Home">
<div>
<br />
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName">Name</label>
<input
id="exampleInputName"
v-model="input"
type="text"
class="form-control"
placeholder="Please fill this section"
/>
</div>
</form>
</div>
</tab>
<tab title="Profile">
<p>Profile tab.</p>
</tab>
<tab title="Others">
<p>Others tab.</p>
</tab>
</tabs>
</section>
</template>
<script>
export default {
data() {
return {
index: 0,
input: '',
}
},
methods: {
onBeforeChange(indexFrom, indexTo, done) {
if (indexFrom === 0 && this.input === '') {
this.$notify('Please fill your name first.')
done(1)
} else {
done()
}
},
},
}
</script>
# API Reference
# Tabs (opens new window)
# Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
v-model | Number | The current tab index, use this to manual change tab index. | ||
justified | Boolean | false | Use justified style. | |
pills | Boolean | false | Use pills style. | |
stacked | Boolean | false | Use stacked style, note that this have to work with pills . | |
transition | Number | 150 | The tabs show / hide transition time in ms. Use 0 to disable transitions. | |
custom-nav-class | Apply custom classes to the tab nav, could be Object or String. | |||
custom-content-class | Apply custom classes to the tab content, could be Object or String. |
# Slots
Name | Description |
---|---|
default | The tabs content. |
nav-right | The snip at right side of tab nav. Note: it won't display if using justified style. |
# Events
Name | Params | Description |
---|---|---|
change | index | Trigger after active tab changed, with the active index. |
before-change | indexFrom, indexTo, done | Trigger before active tab change. Calling done() will allow the change. Calling done(err) , where err is any value, will prevent it. Note that this callback will only trigger on tab clicking. |
changed | index | Trigger after tab changed and transition finished, with the active index. |
# Tab (opens new window)
# Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
title | String | The tab title. | ||
tab-classes | Object | {} | Object where keys represent class and value is interpreted as a boolean to indicate whether the class should be shown | |
disabled | Boolean | false | Disable the tab. | |
group | String | Tabs nav with same group will in a dropdown list. | ||
pull-right | Boolean | false | Add pull-right class to the tab nav. A grouped tab will be pull to right if one of its sub-tabs has this prop set to true . | |
hidden | Boolean | false | Hide the tab, use this prop because v-show doesn't work on Tab component. |
# Slots
Name | Description |
---|---|
title | Title slot. This will override title or html-title prop if exist. |