본문으로 건너뛰기

Tabs

MSK Tabs는 같은 화면 안에서 병렬 섹션을 전환하는 primitive입니다. 페이지 이동이 아니라 같은 맥락의 정보 그룹을 빠르게 바꿀 때 사용합니다.

Preview​

UI Kit은 Core가 구현을 소유하고 프로젝트는 data API와 token만 사용합니다.

Data API​

<div data-msk-tabs>
  <div data-msk-tab-list>
    <button type="button" data-msk-tab-target="#overview">개요</button>
    <button type="button" data-msk-tab-target="#settings">설정</button>
  </div>
  <section id="overview">개요 내용</section>
  <section id="settings" hidden>설정 내용</section>
</div>

JavaScript API​

window.MSK.ui.tabs.activate(button);

Accessibility​

  • role="tablist", role="tab", role="tabpanel"을 자동 준비합니다.
  • ArrowLeft, ArrowRight, Home, End를 지원합니다.
  • 선택된 tab은 aria-selected="true"와 data-state="active"를 갖습니다.