Tabs

WIP component, TODO: API documents.

Tabs

J. Clarkson J. Boar R. Ham Mr. William

Jeremy Clarkson

James May

Richard Hammond

Le William
Tab 1 Tab 2 Tab 3 Tab 4

J. Clarkson

J. Boar

R. Ham

Le William

 
<div style="width: 100%">
  <md-tabs iconsabove selected="2">
    <md-tab value="1">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      J. Clarkson
    </md-tab>
    <md-tab value="2">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      J. Boar
    </md-tab>
    <md-tab value="3">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      R. Ham
    </md-tab>
    <md-tab value="4">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      Mr. William
    </md-tab>
  </md-tabs>
  <md-tab-panel value="1">
    <p>Jeremy Clarkson</p>
  </md-tab-panel>
  <md-tab-panel value="2">
    <p>James May</p>
  </md-tab-panel>
  <md-tab-panel value="3">
    <p>Richard Hammond</p>
  </md-tab-panel>
  <md-tab-panel value="4">
    <p>Le William</p>
  </md-tab-panel>
</div>

<div style="width: 100%">
  <md-tabs secondary switch="auto" selected="3">
    <md-tab value="1">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      Tab 1
    </md-tab>
    <md-tab value="2">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      Tab 2
    </md-tab>
    <md-tab value="3">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      Tab 3
    </md-tab>
    <md-tab value="4">
      <iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
      Tab 4
    </md-tab>
  </md-tabs>
  <md-tab-panel value="1">
    <p>J. Clarkson</p>
  </md-tab-panel>
  <md-tab-panel value="2">
    <p>J. Boar</p>
  </md-tab-panel>
  <md-tab-panel value="3">
    <p>R. Ham</p>
  </md-tab-panel>
  <md-tab-panel value="4">
    <p>Le William</p>
  </md-tab-panel>
</div>

Properties

Name Type Default Description
iconsAbove Boolean false Whether the icons are above the labels or before them.
secondary Boolean false Whether it's primary or secondary.

Tab

Tab Panel