Vue MDBootstrap

Appearance

Tabs ​

BsTabs is a component used for creating a pseudo-navigation for a page.

Overview ​

Tabs navigation can be created using <bs-tabs> and <bs-tab>. <bs-tabs> is used to create the navigation container and <bs-tab> is used to create the tab-items and their contents.

INFO

  • The url property in the example above is optional and can be ignored.
  • See BsIcon to learn more about how to apply the Google Material Symbols to the icon property.
  • Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Style Variants ​

Bootstrap Tabs ​

Bootstrap Tabs style is default style variant when the variant property is not defined. To explicitly define this style variant, sets variant property value of <bs-tabs> to 'tabs'. When use inside <bs-card> component, sets the inner-class property value to 'card-header' to have an appropriate Bootstrap Tabs style.

Bootstrap Pill ​

Bootstrap Pill style is another style variant from Bootstrap. To use it, sets variant property value of <bs-tabs> to 'pills'. When use inside <bs-card> component, sets the inner-class property value to 'card-header' to have an appropriate Bootstrap Pill style.

Additionally, use the active-class property on <bs-tabs> to customize the active Tab color, for example active-class="bg-unique active". And use the tab-class property to customize the inactive Tab color.

Material ​

Material style variant can be enabled, by setting variant property value of <bs-tabs> to 'material' and use the color property to have an appropriate tabs color.

Additionally, use the active-class property to customize the active Tab color and indicator, for example: active-class="border-yellow active".

TIP

Any valid color variants can be applied to the color property.

Modern ​

Modern style variant can be enabled, by setting variant property value of <bs-tabs> to 'modern' and use the color property to have an appropriate tabs color.

Additionally, use the active-class property to customize the active Tab color, for example: active-class="bg-unique active". And use the tab-class property to customize the inactive Tab color.

TIP

Any valid color variants can be applied to the color property.

Tabs Placement ​

The Tabs can be placed at top, bottom, left or right side.

Top ​

This placement is the default tabs position when tab-position property is not defined. To explicitly define Tabs placement, sets tab-position property value of <bs-tabs> to 'top'. Additionally, you can also set the tabs alignment by setting the alignment property value.

Bottom ​

To place the tabs at bottom side, sets tab-position property value of <bs-tabs> to 'bottom'. Additionally, you can also set the tabs alignment by setting the alignment property value.

Left ​

To place the tabs at left side, sets tab-position property value of <bs-tabs> to 'left'. Additionally, you can also set the tabs alignment by setting the alignment property value.

To place the tabs at left side, sets tab-position property value of <bs-tabs> to 'right'. Additionally, you can also set the tabs alignment by setting the alignment property value.

Icons ​

Position And Size ​

To change the icon position use icon-position property and use icon-size to change the icon size. If you set this property, each tab item will have the same icon position and size.

Additionally, you can sets icon-variant property to outlined (default), rounded, sharp, filled, outlined_filled, rounded_filled, or sharp_filled to set the icon style variant. See Google Material Symbols for details.

Icon Only ​

Do not sets the label property of <bs-tab> and sets the icon property value to display only the icon.

CSS Variables ​

Added since v2.0.0
scss
--md-tabs-content-padding: 1.25rem;
--md-tabs-item-padding: 0.75rem 1.25rem;
--md-tabs-item-spacing: 0.375rem;
--md-tabs-item-font-weight: 500;
--md-tabs-placement-top-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15),0px 2px 2px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12);
--md-tabs-placement-bottom-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2),0px -1px 2px rgba(0, 0, 0, 0.14),0px -3px 1px -2px rgba(0, 0, 0, 0.12);
--md-tabs-placement-left-shadow: 1px 0px 5px rgba(0, 0, 0, 0.2),2px 0px 2px rgba(0, 0, 0, 0.14),3px 0px 1px -2px rgba(0, 0, 0, 0.12);
--md-tabs-placement-right-shadow: -1px 0px 5px rgba(0, 0, 0, 0.2),-2px 0px 2px rgba(0, 0, 0, 0.14),-3px 0px 1px -2px rgba(0, 0, 0, 0.12);


// Bootstrap Tabs style variant
--bs-nav-tabs-border-color: #dee2e6;
--bs-nav-tabs-border-radius: 0.375rem;
--bs-nav-tabs-border-width: 1px;
--bs-nav-tabs-link-active-color: #495057;
--bs-nav-tabs-link-active-bg: #fff;
--bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
--bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;

--md-tabs-nav-active-border-color: #dee2e6;
--md-tabs-nav-margin-x: 1rem;
--md-tabs-nav-margin-y: 0.5rem;

// Bootstrap Pill style variant
--bs-nav-pills-border-radius: 0.375rem;
--bs-nav-pills-link-active-bg: rgb(var(--md-field-primary-indicator-rgb));
--bs-nav-pills-link-active-color: #fff;

// Bootstrap Tabs and Pill style variant
--bs-nav-link-color: rgba(69, 64, 98, 0.86);
--bs-nav-link-hover-color: rgb(var(--md-field-primary-indicator-rgb))

// Material style variant
--md-tabs-material-padding: 1.125rem 1.5rem 1rem 1.5rem;
--md-tabs-material-margin-start: 1rem;
--md-tabs-material-margin-end: 1rem;
--md-tabs-material-indicator-active-color: #fff;
--md-tabs-material-indicator-border: 0.2rem;

// Modern style variant
--md-tabs-modern-border-radius: 50rem;
--md-tabs-modern-padding: 0.625rem 1.25rem;
--md-tabs-modern-active-bgcolor: rgba(0, 0, 0, 0.2);

// Material and Modern style variant
--md-tabs-item-color: rgba(255, 255, 255, 0.6);
--md-tabs-item-active-color: #fff;
--md-tabs-item-hover-color: rgba(255, 255, 255, 0.8);
--md-tabs-item-disabled-color: rgba(255, 255, 255, 0.3);

API Reference ​

BsTabs ​

BsTab ​

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar