Vue Bootstrap Tabs
Vue Tabs - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.
Note: If you are looking for pills, go to the Pills documentation
Default tabs
Default styling for Bootstrap Tabs component
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.
Material tabs MDB Pro component
Material Design styling for Bootstrap Tabs component
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.
Tabs with dropdown MDB Pro component
Add dropdown menus with a little extra data and the dropdown component.
Tabs justified MDB Pro component
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.
Pills within tabs MDB Pro component
Panel 1
Classic tabs MDB Pro component
With border
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
With shadow
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Color options:
cyan
orange
grey
pink
green
primary
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Tabs with HTML content
To display your custom HTML content in tabs, place your template inside a wrapper with a reference to a named slot. For every link from links array, a slot is created - if you add additional key to the link object (slot: 'custom-name'
) the slot will be named according to the given value, if not, the name will be exactly the same as the link's 'text' value. You can adjust tabs tranistions with transition-duration transition-style
properties.
This is title of the news
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
by Carine Fox, 19/08/2016
Vue Tabs - API
In this section you will find advanced information about the Tabs component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
tag |
String | 'ul' |
Changes tabs's wrapper tag | <mdb-tabs tag="div" /> |
active |
Number | 0 |
Active element index | <mdb-tabs :active="1" /> |
color |
String | 'default' |
Changes tabs's color | <mdb-tabs color="cyan" /> |
pills |
Boolean | false |
Changes tabs into pills | <mdb-tabs pills /> |
tabs |
Boolean | false |
Changes tabs into nav tabs | <mdb-tabs tabs /> |
vertical |
Boolean | false |
Flex column layout | <mdb-tabs vertical /> |
justify |
Boolean | false |
Justified layout | <mdb-tabs justify /> |
navClass |
String |
|
Adds new classes to already existing | <mdb-tabs navClass="..." /> |
card |
Boolean | false |
Changes tabs style into card layout | <mdb-tabs card /> |
header |
Boolean | false |
Changes tabs style into card header layout | <mdb-tabs header /> |
links |
Array |
|
Nav links data | <mdb-tabs :links="[{...}, {...}]" /> |
content |
Array |
|
Tab content data | <mdb-tabs :content="[{...}, {...}]" /> |
border |
Boolean | false |
Replace card shadow by border | <mdb-tabs border /> |
zIndex |
Number | 1 |
Change component z-index value | <mdb-tabs zIndex="0" /> |
transitionDuration |
Number | 0.3 |
Change transition duration (in seconds) | <mdb-tabs :transition-duration="0.8" /> |
transitionStyle |
String | 'ease-out' |
Change transition style | <mdb-tabs transition-style="ease-in" /> |
API Reference: Methods
Name | Parameters | Description | Example |
---|---|---|---|
v-on:activeTab |
index | Returns active tab index after each tab change | <mdb-tabs @activeTab="getActiveTabIndex" /> |