Tabs

a horizontal switch between sibling views; the tab list coordinates its tabs.

Example

<div class="lucent-tab-list" role="tablist">
  <button type="button" class="lucent-tab lucent-tab--md lucent-tab--active" role="tab" aria-selected="true" tabindex="0" data-value="overview">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">dashboard</span>
    </span>
    <span class="lucent-tab__label">Overview</span>
  </button>
  <button type="button" class="lucent-tab lucent-tab--md" role="tab" aria-selected="false" tabindex="-1" data-value="activity">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">timeline</span>
    </span>
    <span class="lucent-tab__label">Activity</span>
  </button>
  <button type="button" class="lucent-tab lucent-tab--md" role="tab" aria-selected="false" tabindex="-1" data-value="settings">
    <span class="lucent-icon lucent-icon--md" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">settings</span>
    </span>
    <span class="lucent-tab__label">Settings</span>
  </button>
  <button type="button" class="lucent-tab lucent-tab--md lucent-tab--disabled" role="tab" aria-selected="false" tabindex="-1" data-value="locked" disabled>
    <span class="lucent-tab__label">Locked</span>
  </button>
</div>

Using it

Angular lucent-tab-list, lucent-tab
import { LucentTabList, LucentTab } from '@design-foundry/lucent-angular';
Stylesheet .lucent-tab-list, .lucent-tab
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
tab-list scale input TabScale md size of every tab.
tab-list activeTab input string '' value of the active tab.
tab-list tabChange output string emits the newly active value.
tab label input string '' tab text.
tab icon input string '' leading glyph.
tab disabled input boolean false not selectable.
tab value input string '' identity emitted on change.
tab scale input, two-way TabScale md
tab active input, two-way boolean false
tab tabClick output void

Theming

Color (8)
Size & spacing (18)
Border & radius (1)
Shadow (2)
Type (2)