Components - Tab

comment

  • 기본 구조: tab 클래스를 사용하여 탭 메뉴 구성, tab-content 클래스로 탭 콘텐츠 구성
  • 탭 메뉴: tab__menu 클래스를 사용하며, data-tab-idx 속성으로 탭 인덱스 지정
  • 탭 텍스트: tab__menu-text 클래스로 탭 메뉴 텍스트를 감싸서 사용
  • 배지: 활성 탭에 tab__menu-badge 클래스를 사용하여 선택된 항목 정보를 배지 형태로 표시
  • 정보 텍스트: 비활성 탭에 tab__menu-info 클래스를 사용하여 선택된 항목 정보를 텍스트로 표시
  • 탭 콘텐츠: tab-content__item 클래스를 사용하며, data-tab-content 속성으로 탭 메뉴와 매칭
  • 기본 탭 설정: data-default-idx 속성으로 기본 활성화 탭 인덱스 지정 (0부터 시작)
  • 활성 상태: active 클래스로 활성 탭 메뉴와 콘텐츠 표시
  • 키보드 네비게이션: Arrow Left/Right 키로 탭 이동, Home/End 키로 첫/마지막 탭 이동
  • ARIA 속성: role="tablist", role="tab", role="tabpanel", aria-selected 속성 자동 관리
  • JavaScript 초기화: 페이지 로드 시 initTabs() 함수가 자동으로 호출되어 모든 .tab 요소 초기화
Tab - 기본

HTML 구조

<div class="tab" data-default-idx="0">
  <span class="tab__menu" data-tab-idx="0">
    <span class="tab__menu-text">탭 1</span>
    <span class="ui-badge">
      <span class="ui-badge__text">1개 선택</span>
      <button type="button" class="ui-badge__close" aria-label="선택 해제"></button>
    </span>
  </span>
  <span class="tab__menu" data-tab-idx="1">
    <span class="tab__menu-text">탭 2</span>
    <span class="tab__menu-info">: 항목 1개 선택</span>
  </span>
</div>

<div class="tab-content">
  <div class="tab-content__item" data-tab-content="0">탭 1 콘텐츠</div>
  <div class="tab-content__item" data-tab-content="1">탭 2 콘텐츠</div>
</div>
Tab - 라디오 버튼 사용

HTML 구조

<div class="tab" data-default-idx="0">
  <label class="tab__menu ui-radio" data-tab-idx="0">
    <input type="radio" name="tab-radio" class="ui-radio__input" data-tab-idx="0" checked />
    <span class="ui-radio__icon"></span>
    <span class="ui-radio__label">
      <span class="tab__menu-text">탭 1</span>
    </span>
  </label>
  <label class="tab__menu ui-radio" data-tab-idx="1">
    <input type="radio" name="tab-radio" class="ui-radio__input" data-tab-idx="1" />
    <span class="ui-radio__icon"></span>
    <span class="ui-radio__label">
      <span class="tab__menu-text">탭 2</span>
    </span>
  </label>
</div>

<div class="tab-content">
  <div class="tab-content__item" data-tab-content="0">탭 1 콘텐츠</div>
  <div class="tab-content__item" data-tab-content="1">탭 2 콘텐츠</div>
  <div class="tab-content__item" data-tab-content="2">탭 3 콘텐츠</div>
</div>
Tab - 셀렉트 박스 사용

HTML 구조

<div class="ui-select-box tab tab--select" data-tab-select data-default-idx="0">
  <div class="ui-select-box__trigger js-select-value">
    <span data-selected-text>Mobile</span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__list">
      <div class="ui-select-box__option js-select-option" data-tab-idx="0"><span>Mobile</span></div>
      <div class="ui-select-box__option js-select-option" data-tab-idx="1"><span>PC</span></div>
      <div class="ui-select-box__option js-select-option" data-tab-idx="2"><span>CTV</span></div>
    </div>
  </div>
</div>

<div class="tab-content">
  <div class="tab-content__item" data-tab-content="0">Mobile 콘텐츠</div>
  <div class="tab-content__item" data-tab-content="1">PC 콘텐츠</div>
  <div class="tab-content__item" data-tab-content="2">CTV 콘텐츠</div>
</div>