Vue MDBootstrap

Appearance

Tabs ​

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

Updated in v2.2.0

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

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 value of inner-class property to 'md-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 'md-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.

Right ​

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 set the label property of <bs-tab> and set the value of icon property to the desired icon name to display only the icon.

Using Extra Slot ​

Use the append-header slot to add additional components to the top right side of the tab.

Added in v2.2.0

CSS Variables ​

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-tabs for better customization.

Updated in v2.2.0
scss
.md-tabs {
  --md-tab-content-background: inherit;
  --md-tab-content-padding: #{vars.$padding-md + 0.25};
  --md-tab-placement-top-shadow: #{vars.$tabs-placement-top-shadow};
  --md-tab-placement-bottom-shadow: #{vars.$tabs-placement-bottom-shadow};
  --md-tab-placement-left-shadow: #{vars.$tabs-placement-left-shadow};
  --md-tab-placement-right-shadow: #{vars.$tabs-placement-right-shadow};
  --md-tab-spacing: #{vars.$tabs-spacing};

  // Material and Modern style variant
  --md-tab-item-padding: #{vars.$tabs-item-padding};
  --md-tab-item-color: #{color.change(colors.$white, $alpha: 0.6)};
  --md-tab-item-active-color: #{colors.$white};
  --md-tab-item-hover-color: #{color.change(colors.$white, $alpha: 0.8)};
  --md-tab-item-disabled-color: #{color.change(colors.$white, $alpha: 0.3)};
  --md-tab-item-font-weight: var(--font-weight-medium);
  --md-tab-item-font-size: 0.95rem;

  // Bootstrap Tabs style variant
  --md-tab-tabs-background: var(--md-card-cap-bg, #{vars.$card-cap-bg});
  --md-tab-tabs-border-radius: var(--md-radius, #{vars.$radius-md});
  --md-tab-tabs-border-color: var(--md-card-border-color, #{vars.$card-border-color});
  --md-tab-tabs-border-width: var(--md-card-border-width, thin);
  --md-tab-tabs-active-bg: #{colors.$white};
  --md-tab-tabs-active-border-color: #{colors.$gray-300};
  --md-tab-tabs-hover-border-color: oklch(0.92 0 0);
  --md-tab-tabs-color: #{helper.to-oklch(color.mix(colors.$mdb-default-color, color.change(colors.$gray-800, $alpha: 0.8), 30%, oklch))};
  --md-tab-tabs-hover-color: var(--md-field-active-indicator);
  --md-tab-tabs-margin-x: var(--md-card-cap-padding-x, #{vars.$card-cap-padding-x});
  --md-tab-tabs-margin-y: var(--md-card-cap-padding-y, #{vars.$card-cap-padding-y});

  // Bootstrap Pill style variant
  --md-tab-pills-background: var(--md-card-cap-bg, #{vars.$card-cap-bg});
  --md-tab-pills-border-radius: var(--md-radius, #{vars.$radius-md});
  --md-tab-pills-border-color: var(--md-card-border-color, #{vars.$card-border-color});
  --md-tab-pills-border-width: var(--md-card-border-width, thin);
  --md-tab-pills-color: #{helper.to-oklch(color.mix(colors.$mdb-default-color, color.change(colors.$gray-800, $alpha: 0.8), 30%, oklch))};
  --md-tab-pills-active-bg: var(--md-field-active-indicator);
  --md-tab-pills-active-color: #{colors.$white};
  --md-tab-pills-hover-color: var(--md-field-active-indicator);
  --md-tab-pills-margin: #{vars.$tabs-pills-margin};

  // Material style variant
  --md-tab-material-margin-start: #{vars.$padding-md};
  --md-tab-material-margin-end: #{vars.$padding-md};
  --md-tab-material-padding: #{vars.$tabs-material-padding};
  --md-tab-material-indicator-active-color: #{colors.$white};
  --md-tab-material-indicator-border: #{vars.$tabs-material-indicator-border};

  // Modern style variant
  --md-tab-modern-border-radius: var(--md-radius-pill);
  --md-tab-modern-active-bg: #{color.change(colors.$black, $alpha: 0.2)};
  --md-tab-modern-margin-horizontal: #{vars.$tabs-modern-margin-horizontal};
  --md-tab-modern-margin-vertical: #{vars.$tabs-modern-margin-vertical};
}

API Reference ​

BsTabs ​

BsTab ​

Released under the BSD-3-Clause License.

Copyright © 2020-present • Ahmad Fajar