Skip to content
SHINSEGAE V UI

Tab

  • Demo

  • 참고 링크

Astro

<Tab
  tabItems={[
    { label: "ALL", key: "000" },
    { label: "BEAUTY", key: "001" },
    { label: "WOMEN", key: "002" },
    { label: "MEN", key: "003" },
    { label: "BAG", key: "004" },
    { label: "AHOES", key: "005" },
    { label: "ACCESSARY", key: "006" },
    { label: "SPORTS/LEISURE", key: "007" },
    { label: "GOLF", key: "008" },
    { label: "KIDS", key: "009" },
    { label: "LIFE", key: "010" },
    { label: "IPSUM LOREM", key: "011" },
  ]}
  activeKey="000"
/>

Props:

  • offset?: number: 탭 컨테이너의 오프셋. 기본값 24
  • spaceBetween?: number: 탭 아이템 간의 간격. 기본값 16
  • centered?: boolean: 값 있을 시, centered-slides, centered-slides-bounds true 처리. 기본값 true
  • tabItems?: { label: string, key: string, separator?: boolean }[]: 탭 아이템 목록
  • activeKey?: string: 현재 활성화된 탭의 키 값
  • activeIndex?: string: 현재 활성화된 탭의 인덱스
  • noPanels?: boolean: true시 탭-패널 연동 안함. tab-container 참고

HTML

<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
  class="v-tab"
  role="tablist"
  active-index="11"
>
  <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>


<!-- … -->

Preview