Tab

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/tab.css" />

<script src="/guide/js/components/tab.js"></script>

Live

탭 내용이 들어갑니다. Panel1

States

Tab1 Active

탭 내용이 들어갑니다. Panel1

Tab2 Active

탭 내용이 들어갑니다. Panel2

Tab3 Active

탭 내용이 들어갑니다. Panel3

Specs

요소 Width Padding Border Font Color (Active)
Tab Container 400px — 1px solid --gray-200 · radius-md — —
Tab Button auto 12px 16px Header: 1px --gray-300 · Active: 2px --green-800 16px · Pretendard Regular --green-800 text + border
Tab Panel 100% 0 12px 12px — 18px · Pretendard Regular —

Code

<div class="tab">

  <div class="tab__header" role="tablist">
    <button class="tab__btn tab__btn--active" role="tab"
            aria-selected="true" aria-controls="panel-1">Tab1</button>
    <button class="tab__btn" role="tab"
            aria-selected="false" aria-controls="panel-2">Tab2</button>
    <button class="tab__btn" role="tab"
            aria-selected="false" aria-controls="panel-3">Tab3</button>
  </div>

  <div class="tab__panel tab__panel--active" id="panel-1" role="tabpanel">
    <p class="tab__text">탭 내용이 들어갑니다.</p>
  </div>
  <div class="tab__panel" id="panel-2" role="tabpanel" hidden>
    <p class="tab__text">탭 내용이 들어갑니다.</p>
  </div>
  <div class="tab__panel" id="panel-3" role="tabpanel" hidden>
    <p class="tab__text">탭 내용이 들어갑니다.</p>
  </div>

</div>

<script src="/guide/js/components/tab.js"></script>

Classes

클래스 타입 설명
.tab 루트 탭 컨테이너
.tab__header 요소 탭 버튼 행 (role="tablist")
.tab__btn 요소 탭 버튼. aria-controls로 패널 연결
.tab__btn--active 수정자 활성 탭. 초록 텍스트 + 하단 보더
.tab__panel 요소 콘텐츠 패널 (기본 display: none)
.tab__panel--active 수정자 표시되는 패널
.tab__text 요소 패널 텍스트