Link copied!

Tab (CSS) Migration

Reason for Deprecation

Tab is a CSS component, that only provided formatting but the functionality gain by native HTML element (inside link).

New component to use

Tab-bar Benefits

  • It has Tab switch logic.
  • It has Icon for header by API.
  • It has Badge for header by API.
  • It supports keyboard accessibility.
  • It provides event when Tab header is clicked.

Side-by-Side Examples

<div class="e-tabs">
  <input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
  <label class="e-tabs__title" for="tabs-1-0">
    <span class="e-tabs__separator">
      Tab 1
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-1">
  <label class="e-tabs__title" for="tabs-1-1">
    <span class="e-tabs__separator">
      Tab 2
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-2" disabled>
  <label class="e-tabs__title" for="tabs-1-2">
    <span class="e-tabs__separator">
      Disabled
    </span>
  </label>
  <input type="radio" name="tabs-1" id="tabs-1-3">
  <label class="e-tabs__title" for="tabs-1-3">
    <span class="e-tabs__separator">
      Tab 4
    </span>
  </label>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content">
      1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
    <div class="e-tabs__panel__content">
      4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </div>
  </div>
</div>
<e-tab-bar>
  <e-tab label="Tab 1" spacing="cozy">
    <e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
  </e-tab>
  <e-tab label="Tab 2" selected spacing="cozy">
    <e-tab-content>Tab 2 content goes here. Aliquam hendrerit turpis quis interdum porttitor.</e-tab-content>
  </e-tab>
  <e-tab label="Disabled" disabled spacing="cozy">
    <e-tab-content>Tab disabled content goes here. Omnis facilis repellat eveniet inventore cumque vero dicta.</e-tab-content>
  </e-tab>
  <e-tab label="Tab 4" badge="!" spacing="cozy">
    <e-tab-content>Tab 4 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
  </e-tab>
</e-tab-bar>
<div class="e-tabs">
  <div class="e-tabs__title e-tabs__title-active">
    <a class="e-tabs__separator">
      <e-icon icon="e-smile" size="small" color="inherit"></e-icon>
      Tab 1
    </a>
  </div>
  <div class="e-tabs__title">
    <a class="e-tabs__separator">
      <e-icon icon="bolt" size="small" color="inherit"></e-icon>
      Tab 2

    </a>
  </div>
  <div class="e-tabs__title e-tabs__title-disabled">
    <a class="e-tabs__separator">
      <e-icon icon="e-conversation" size="small" color="inherit"></e-icon>
      Tab 3
    </a>
  </div>
  <div class="e-tabs__panel">
    <div class="e-tabs__panel__content e-tabs__panel__content-active">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
<e-tab-bar>
  <e-tab label="Tab 2" icon="e-smile" spacing="cozy">
    <e-tab-content>Tab 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-tab-content>
  </e-tab>
  <e-tab label="Tab 3" icon="bolt" disabled spacing="cozy">
    <e-tab-content>Tab 2 content goes here. Sequi dolorum animi maiores amet quasi sunt excepturi eius nesciunt odio veritatis fuga labore.</e-tab-content>
  </e-tab>
  <e-tab label="Tab 4" icon="e-conversation" badge="5" spacing="cozy">
    <e-tab-content>Tab 3 content goes here. Cupiditate reiciendis culpa deleniti perferendis fugit nam.</e-tab-content>
  </e-tab>
</e-tab-bar>