Tab

Tab navigation to switch between views

Properties#

Name	Description
.tab	The tab container component
.tab-item	The tab controller component
.disabled [disabled]	The disabled style for tab item

Name

Description

.tab

The tab container component

.tab-item

The tab controller component

.disabled

[disabled]

The disabled style for tab item

Features#

<ul class="tab">
  <li class="tab-item">
    <a href="#tabs">List</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Favorite</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Mypage</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Settings</a>
  </li>
</ul>

disabled#

List
Favorite
Mypage
Settings

<ul class="tab">
  <li class="tab-item disabled">
    <a href="#tabs" disabled>List</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Favorite</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Mypage</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Settings</a>
  </li>
</ul>

Classic Tab#

With bottom border and hover effect

List
Favorite
Mypage
Settings

.tab {
  @apply border-b border-solid border-gray-300;
}

.tab .tab-item.active {
  @apply -mb-px;
  @apply border-b-2 border-solid border-indigo-500;
}

<ul class="tab">
  <li class="tab-item active">
    <a href="#tabs">List</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Favorite</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Mypage</a>
  </li>
  <li class="tab-item">
    <a href="#tabs">Settings</a>
  </li>
</ul>