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부터 시작)
  • 활성 상태: is-active 클래스로 활성 탭 메뉴와 콘텐츠 표시
  • 비활성 상태: is-disabled 클래스를 추가하면 해당 탭을 클릭하거나 활성화할 수 없음. 키보드 네비게이션 시에도 자동으로 건너뜀
  • 키보드 네비게이션: Arrow Left/Right 키로 탭 이동, Home/End 키로 첫/마지막 탭 이동
  • ARIA 속성: role="tablist", role="tab", role="tabpanel", aria-selected, aria-disabled 속성 자동 관리
  • 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>
Tab - 비활성 탭 (is-disabled)

HTML 구조

<!-- 기본 탭 - is-disabled 사용 -->
<div class="tab" data-default-idx="0">
  <span class="tab__menu" data-tab-idx="0">
    <span class="tab__menu-text">활성 탭</span>
  </span>
  <span class="tab__menu is-disabled" data-tab-idx="1">
    <span class="tab__menu-text">비활성 탭</span>
  </span>
</div>

<!-- 라디오 버튼 탭 - is-disabled 사용 -->
<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">활성 탭</span>
    </span>
  </label>
  <label class="tab__menu ui-radio is-disabled" 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">비활성 탭</span>
    </span>
  </label>
</div>

동작:

  • is-disabled 클래스가 있는 탭은 클릭해도 활성화되지 않음
  • 키보드 네비게이션(화살표 키) 사용 시 비활성 탭을 자동으로 건너뜀
  • 라디오 버튼이 있는 경우 자동으로 disabled 속성이 추가됨
  • 스크린 리더를 위해 aria-disabled="true" 속성이 자동으로 추가됨
  • 시각적으로 회색 텍스트와 not-allowed 커서로 표시됨