Tab

Demo

ALL 내용

BEAUTY 내용

WOMEN 내용

MEN 내용

BAG 내용

AHOES 내용

ACCESSARY 내용

SPORTS/LEISURE 내용

GOLF 내용

KIDS 내용

LIFE 내용

IPSUM LOREM 내용

<script type="module">
  if (!window.customElements.get("swiper-container")) {
    import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
  }
  if (!window.customElements.get("tab-container")) {
    import("/ui/element/tab-container.js");
  }
</script>

<tab-container active-index="11" class="v-tab">
  <swiper-container
    slides-offset-before="24"
    slides-offset-after="24"
    space-between="16"
    slides-per-view="auto"
    free-mode="true"
    slide-to-clicked-slide="true"
    centered-slides="true"
    centered-slides-bounds="true"
  >
    <swiper-slide>
      <button
        type="button"
        class="v-button v-tab-button"
        role="tab"
        aria-controls="tabpanel_id"
        id="tabId"
      >
        <!-- 선택된 탭에 aria-selected="true" 속성이 추가됩니다 -->
        ALL
      </button>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</tab-container>

<div class="v-tab-panel is-active" id="tabpanel_id">
  <!-- 활성 탭 패널에 is-active 클래스가 추가됩니다. 영역 유지를 위해 첫 탭 패널에는 is-active 클래스가 적용되어 있으면 더 좋습니다. -->
  ALL 내용
</div>

<!-- … -->

버튼의 aria-controls 속성 값과 탭 패널의 id 속성 값을 사용하여 탭과 탭 패널을 연결하므로 동일한 값으로 맞춰주어야 합니다.