Tabs

Tabbed content, useful to toggle between content without jumping around the page or across pages.

Basic Tabs

One
Two (disabled)
Three
Four
Five
Six
Seven
Eight
Nine
Ten
This is tab one
This is tab two
<div class="c-tabs">
  <div class="c-tabs__nav">
    <div class="c-tabs__headings">
      <div class="c-tab-heading c-tab-heading--active">One</div>
      <div class="c-tab-heading c-tab-heading--disabled">Two (disabled)</div>
      <div class="c-tab-heading">Three</div>
      <div class="c-tab-heading">Four</div>
      <div class="c-tab-heading">Five</div>
      <div class="c-tab-heading">Six</div>
      <div class="c-tab-heading">Seven</div>
      <div class="c-tab-heading">Eight</div>
      <div class="c-tab-heading">Nine</div>
      <div class="c-tab-heading">Ten</div>
    </div>
  </div>
  <div class="c-tabs__tab c-tabs__tab--active">This is tab one</div>
  <div class="c-tabs__tab">This is tab two</div>
</div> 

Colors

.c-tabs
Disabled
Default
.c-tabs--brand
Disabled
Default
.c-tabs--info
Disabled
Default
.c-tabs--warning
Disabled
Default
.c-tabs--success
Disabled
Default
.c-tabs--error
Disabled
Default
<div class="c-tabs c-tabs">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--brand">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--brand</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--info">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--info</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--warning">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--warning</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--success">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--success</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div>
<div class="c-tabs c-tabs--error">
  <div class="c-tabs__headings">
    <div class="c-tab-heading c-tab-heading--active">.c-tabs--error</div>
    <div class="c-tab-heading c-tab-heading--disabled">Disabled</div>
    <div class="c-tab-heading">Default</div>
  </div>
</div> 

Basic Tabs

This is tab one This is tab two This is tab three This is tab four This is tab five This is tab six This is tab seven This is tab eight This is tab nine This is tab ten
<blaze-tabs type="success">
  <blaze-tab header="One" open>This is tab one</blaze-tab>
  <blaze-tab disabled header="Two (disabled)">This is tab two</blaze-tab>
  <blaze-tab header="Three">This is tab three</blaze-tab>
  <blaze-tab header="Four">This is tab four</blaze-tab>
  <blaze-tab header="Five">This is tab five</blaze-tab>
  <blaze-tab header="Six">This is tab six</blaze-tab>
  <blaze-tab header="Seven">This is tab seven</blaze-tab>
  <blaze-tab header="Eight">This is tab eight</blaze-tab>
  <blaze-tab header="Nine">This is tab nine</blaze-tab>
  <blaze-tab header="Ten">This is tab ten</blaze-tab>
</blaze-tabs> 

Attributes

Attribute Description
type The color of the tabs
open (boolean) Specify which tab should be selected on load
disabled (boolean) Disable specific tabs to prevent them from opening
header The text that should appear in each tab

Methods

Attribute Description
currentTab() Returns the index of the current tab
openTab(tabIndex: number) Programmatically select a tab to open