Source code

src/showcase/pages/components/tabs.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the tabs component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include src="partials/components/page-header.html" locals='{"title":"componentTabs"}'></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('tabs')"></h2></header>
      <div class="card-body">
        <div x-data="uiTabs(['overview', 'details'])" x-id="['tabs']">
          <div role="tablist" :aria-label="$t('tabs')" class="nav nav-tabs" @keydown="navigate">
            <template x-for="tab in ['overview','details']" :key="tab">
              <button
                role="tab"
                :id="$id('tabs') + '-' + tab"
                :aria-controls="$id('tabs') + '-panel-' + tab"
                :aria-selected="active === tab"
                :tabindex="active === tab ? 0 : -1"
                class="nav-link"
                :class="{ active: active === tab }"
                @click="select(tab)"
                x-text="$t(tab)"
              ></button>
            </template>
          </div>
          <template x-for="tab in ['overview','details']" :key="tab">
            <div
              class="pt-3 text-muted"
              role="tabpanel"
              tabindex="0"
              :id="$id('tabs') + '-panel-' + tab"
              :aria-labelledby="$id('tabs') + '-' + tab"
              x-show="active === tab"
              x-text="$t(tab === 'overview' ? 'tabOverview' : 'tabDetails')"
            ></div>
          </template>
        </div>
      </div>
    </article>
  </div>
</section>