Tabs

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

Basic Tabs

<blaze-tabs>
  <blaze-tab type="brand" header="One" open>This is tab one</blaze-tab>
  <blaze-tab disabled header="Two (disabled)">This is tab two</blaze-tab>
  <blaze-tab type="info" header="Three">This is tab three</blaze-tab>
  <blaze-tab type="warning" header="Four">This is tab four</blaze-tab>
  <blaze-tab type="success" header="Five">This is tab five</blaze-tab>
  <blaze-tab type="error" 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

Name	Description
type: string	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: string	The text that should appear in each tab

Methods

Name	Description
currentTab(): Promise<number>	returns the index of the current tab
openTab(tabIndex: number)	Programmatically select a tab to open

CSS

Basic Tabs

This is tab one

<div role="tablist" class="c-tabs">
  <div class="c-tabs__nav">
    <div class="c-tabs__headings">
      <button role="tab" class="c-tab-heading c-tab-heading--active">Wide tabs with nav</button>
      <button role="tab" class="c-tab-heading" disabled>Disabled</button>
      <button role="tab" class="c-tab-heading">Three</button>
      <button role="tab" class="c-tab-heading">Four</button>
      <button role="tab" class="c-tab-heading">Five</button>
      <button role="tab" class="c-tab-heading">Six</button>
      <button role="tab" class="c-tab-heading">Seven</button>
      <button role="tab" class="c-tab-heading">Eight</button>
      <button role="tab" class="c-tab-heading">Nine</button>
      <button role="tab" class="c-tab-heading">Ten</button>
    </div>
  </div>
  <div role="tabpanel" class="c-tabs__tab">This is tab one</div>
  <div role="tabpanel" hidden class="c-tabs__tab">This is tab two</div>
</div>

Colors

This is tab one

<div role="tablist" class="c-tabs">
  <div class="c-tabs__nav">
    <div class="c-tabs__headings">
      <button role="tab" class="c-tab-heading">Default</button>
      <button role="tab" class="c-tab-heading" disabled>Disabled</button>
      <button role="tab" class="c-tab-heading c-tab-heading--brand">Brand</button>
      <button role="tab" class="c-tab-heading c-tab-heading--info">Info</button>
      <button role="tab" class="c-tab-heading c-tab-heading--warning">Warning</button>
      <button role="tab" class="c-tab-heading c-tab-heading--success">Success</button>
      <button role="tab" class="c-tab-heading c-tab-heading--error">Error</button>
    </div>
  </div>
  <div role="tabpanel" class="c-tabs__tab">This is tab one</div>
  <div hidden class="c-tabs__tab">This is tab two</div>
</div>

Active

This is tab one

<div role="tablist" class="c-tabs">
  <div class="c-tabs__nav">
    <div class="c-tabs__headings">
      <button role="tab" class="c-tab-heading">Default</button>
      <button role="tab" class="c-tab-heading" disabled>Disabled</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active">Active</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active c-tab-heading--brand">Brand</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active c-tab-heading--info">Info</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active c-tab-heading--warning">Warning</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active c-tab-heading--success">Success</button>
      <button role="tab" class="c-tab-heading c-tab-heading--active c-tab-heading--error">Error</button>
    </div>
  </div>
  <div role="tabpanel" class="c-tabs__tab">This is tab one</div>
  <div hidden class="c-tabs__tab">This is tab two</div>
</div>