Tab Menu - JavaScript

Tab Menu

ReactVueJS + CSS

Struktur HTML

TabVertical

Copy

<div class="ina-tab-vertical ina-tab-vertical--size-sm ina-tab-vertical--variant-outline" style="width: 180px;">
  <div class="ina-tab-vertical__container" role="tablist">
    <button
      type="button"
      role="tab"
      aria-selected="true"
      class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline ina-tab-vertical__tab--selected"
    >
      Overview
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
    >
      Details
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
    >
      Profile
    </button>
  </div>
</div>

TabHorizontal

Copy

<div class="ina-tab-horizontal ina-tab-horizontal--size-sm ina-tab-horizontal--variant-outline">
  <div class="ina-tab-horizontal__container" role="tablist">
    <button
      type="button"
      role="tab"
      aria-selected="true"
      class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--selected"
    >
      Overview
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline"
    >
      Details
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline"
    >
      Profile
    </button>
  </div>
</div>

Contoh Penggunaan

TabVertical

Contoh 1 - Outline Variant

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px; display: flex; gap: 24px;">
  <div
    class="ina-tab-vertical ina-tab-vertical--size-sm ina-tab-vertical--variant-outline"
    id="tab-vertical-outline"
    style="width: 180px;"
  >
    <div class="ina-tab-vertical__container" role="tablist">
      <button
        type="button"
        role="tab"
        aria-selected="true"
        data-value="overview"
        class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline ina-tab-vertical__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="details"
        class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="profile"
        class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
      >
        Profile
      </button>
    </div>
  </div>
  <div style="flex: 1; padding: 16px;">
    <p id="tab-vertical-outline-selected">Selected: overview</p>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });

    const tabVertical = document.querySelector('#tab-vertical-outline');
    const selectedText = document.querySelector('#tab-vertical-outline-selected');

    tabVertical?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 2 - Button Brand Variant

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px;">
  <div style="display: flex; gap: 24px;">
    <div
      class="ina-tab-vertical ina-tab-vertical--size-sm ina-tab-vertical--variant-button-brand"
      id="tab-vertical-button-brand"
      style="width: 180px;"
    >
      <div class="ina-tab-vertical__container" role="tablist">
        <button
          type="button"
          role="tab"
          aria-selected="true"
          data-value="overview"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-button-brand ina-tab-vertical__tab--selected"
        >
          Overview
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="details"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-button-brand"
        >
          Details
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="profile"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-button-brand"
        >
          Profile
        </button>
      </div>
    </div>
    <div style="flex: 1; padding: 16px;">
      <p id="tab-vertical-button-brand-selected" style="color: var(--color-primary);">
        Selected: overview
      </p>
    </div>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });

    const tabVertical = document.querySelector('#tab-vertical-button-brand');
    const selectedText = document.querySelector('#tab-vertical-button-brand-selected');

    tabVertical?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 3 - Button White Variant

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px; display: flex; gap: 24px;">
  <div
    class="ina-tab-vertical
ina-tab-vertical--size-sm ina-tab-vertical--variant-button-white ina-tab-vertical--use-brand-color"
    id="tab-vertical-button-white"
    style="width: 180px;"
  >
    <div class="ina-tab-vertical__container" role="tablist">
      <button
        type="button"
        role="tab"
        aria-selected="true"
        data-value="overview"
        class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm
ina-tab-vertical__tab--variant-button-white ina-tab-vertical__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="details"
        class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm
ina-tab-vertical__tab--variant-button-white"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="profile"
        class="ina-tab-vertical__tab
ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-button-white"
      >
        Profile
      </button>
    </div>
  </div>
  <div style="flex: 1; padding: 16px;">
    <p id="tab-vertical-button-white-selected">Selected: overview</p>
  </div>
</div>
<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });
    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });
    const tabVertical = document.querySelector('#tab-vertical-button-white');
    const selectedText = document.querySelector('#tab-vertical-button-white-selected');
    tabVertical?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 4 - Sizes

Preview Code

Small (sm)

Overview Details Profile

Medium (md) - Default

Overview Details Profile

Copy

<div style="padding: 20px; display: flex; gap: 24px; flex-wrap: wrap;">
  <div>
    <h3 style="margin-bottom: 12px;">Small (sm)</h3>
    <div
      class="ina-tab-vertical ina-tab-vertical--size-sm ina-tab-vertical--variant-outline"
      id="tab-vertical-size-sm"
      style="width: 180px;"
    >
      <div class="ina-tab-vertical__container" role="tablist">
        <button
          type="button"
          role="tab"
          aria-selected="true"
          data-value="overview"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline ina-tab-vertical__tab--selected"
        >
          Overview
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="details"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
        >
          Details
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="profile"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-sm ina-tab-vertical__tab--variant-outline"
        >
          Profile
        </button>
      </div>
    </div>
  </div>
  <div>
    <h3 style="margin-bottom: 12px;">Medium (md) - Default</h3>
    <div
      class="ina-tab-vertical ina-tab-vertical--size-md ina-tab-vertical--variant-outline"
      id="tab-vertical-size-md"
      style="width: 180px;"
    >
      <div class="ina-tab-vertical__container" role="tablist">
        <button
          type="button"
          role="tab"
          aria-selected="true"
          data-value="overview"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-md ina-tab-vertical__tab--variant-outline ina-tab-vertical__tab--selected"
        >
          Overview
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="details"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-md ina-tab-vertical__tab--variant-outline"
        >
          Details
        </button>
        <button
          type="button"
          role="tab"
          aria-selected="false"
          data-value="profile"
          class="ina-tab-vertical__tab ina-tab-vertical__tab--size-md ina-tab-vertical__tab--variant-outline"
        >
          Profile
        </button>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabVertical === 'function') {
        window.InaUI.initTabVertical();
      }
    });
  }
</script>

TabHorizontal

Contoh 5 - Outline Variant

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px;">
  <div
    class="ina-tab-horizontal ina-tab-horizontal--size-sm ina-tab-horizontal--variant-outline"
    id="tab-horizontal-outline"
  >
    <div class="ina-tab-horizontal__container" role="tablist">
      <button
        type="button"
        role="tab"
        aria-selected="true"
        data-value="overview"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="details"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="profile"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline"
      >
        Profile
      </button>
    </div>
  </div>
  <div style="padding: 16px; margin-top: 16px;">
    <p id="tab-horizontal-outline-selected">Selected: overview</p>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    const tabHorizontal = document.querySelector('#tab-horizontal-outline');
    const selectedText = document.querySelector('#tab-horizontal-outline-selected');

    tabHorizontal?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 6 - Button Brand Variant

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px;">
  <div
    class="ina-tab-horizontal ina-tab-horizontal--size-sm ina-tab-horizontal--variant-button-brand"
    id="tab-horizontal-button-brand"
  >
    <div class="ina-tab-horizontal__container" role="tablist">
      <button
        type="button"
        role="tab"
        aria-selected="true"
        data-value="overview"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-button-brand ina-tab-horizontal__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="details"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-button-brand"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="profile"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-button-brand"
      >
        Profile
      </button>
    </div>
  </div>
  <div style="padding: 16px; margin-top: 16px;">
    <p id="tab-horizontal-button-brand-selected" style="color: var(--color-primary);">
      Selected: overview
    </p>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    const tabHorizontal = document.querySelector('#tab-horizontal-button-brand');
    const selectedText = document.querySelector('#tab-horizontal-button-brand-selected');

    tabHorizontal?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 7 - Full Width

Preview Code

Overview Details Profile Password Team Settings

Selected: overview

Copy

<div style="width: 100%;">
  <div
    class="ina-tab-horizontal ina-tab-horizontal--size-sm ina-tab-horizontal--variant-outline ina-tab-horizontal--full-width"
    id="tab-horizontal-full-width"
  >
    <div
      class="ina-tab-horizontal__container ina-tab-horizontal__container--full-width"
      role="tablist"
    >
      <button
        type="button"
        role="tab"
        aria-selected="true"
        data-value="overview"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width ina-tab-horizontal__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="details"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="profile"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width"
      >
        Profile
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="password"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width"
      >
        Password
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="team"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width"
      >
        Team
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        data-value="settings"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--full-width"
      >
        Settings
      </button>
    </div>
  </div>
  <div style="padding: 16px; margin-top: 16px;">
    <p id="tab-horizontal-full-width-selected">Selected: overview</p>
  </div>
</div>

<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });

    const tabHorizontal = document.querySelector('#tab-horizontal-full-width');
    const selectedText = document.querySelector('#tab-horizontal-full-width-selected');

    tabHorizontal?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Contoh 8 - Disabled States

Preview Code

Overview Details Profile

Selected: overview

Copy

<div style="padding: 20px;">
  <div
    class="ina-tab-horizontal ina-tab-horizontal--size-sm
ina-tab-horizontal--variant-outline"
    id="tab-horizontal-disabled"
  >
    <div class="ina-tab-horizontal__container" role="tablist">
      <button
        type="button"
        role="tab"
        aria-selected="true"
        aria-disabled="false"
        data-value="overview"
        class="ina-tab-horizontal__tab
ina-tab-horizontal__tab--size-sm ina-tab-horizontal__tab--variant-outline
ina-tab-horizontal__tab--selected"
      >
        Overview
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        aria-disabled="true"
        data-value="details"
        disabled
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm
ina-tab-horizontal__tab--variant-outline ina-tab-horizontal__tab--disabled"
      >
        Details
      </button>
      <button
        type="button"
        role="tab"
        aria-selected="false"
        aria-disabled="false"
        data-value="profile"
        class="ina-tab-horizontal__tab ina-tab-horizontal__tab--size-sm
ina-tab-horizontal__tab--variant-outline"
      >
        Profile
      </button>
    </div>
  </div>
  <div style="padding:
16px; margin-top: 16px;">
    <p id="tab-horizontal-disabled-selected">Selected: overview</p>
  </div>
</div>
<script is:inline>
  {
    document.addEventListener('DOMContentLoaded', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });
    document.addEventListener('astro:page-load', () => {
      if (window.InaUI && typeof window.InaUI.initTabHorizontal === 'function') {
        window.InaUI.initTabHorizontal();
      }
    });
    const tabHorizontal = document.querySelector('#tab-horizontal-disabled');
    const selectedText = document.querySelector('#tab-horizontal-disabled-selected');
    tabHorizontal?.addEventListener('tab:change', (event) => {
      if (!selectedText) return;
      selectedText.textContent = `Selected: ${event.detail.value}`;
    });
  }
</script>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan