개요

서로 다른 패널을 동일한 영역에서 전환해 보여줍니다.

HTML 구조

<div data-tabs="my-tabs">
  <div class="dewp-tabs">
    <button class="dewp-tab-btn" data-tab="a">A</button>
  </div>
  <div class="dewp-tab-content">
    <div class="dewp-tab-panel" data-panel="a">내용</div>
  </div>
</div>
        

JavaScript 초기화

DEWP.initTabs(
  document.querySelector('[data-tabs="my-tabs"]'),
  { activeTab: 'a' }
);
        

변형

• Pills: .dewp-tabs-pills
• Underline: .dewp-tabs-underline
• Vertical: .dewp-tabs-vertical
• Theme: .dewp-tabs-primary 등

접근성

• 역할: tablist/tab/tabpanel
• 키보드: Arrow, Home/End, Enter/Space
• ARIA: aria-selected, aria-controls, aria-labelledby

필수 클래스/속성

• 컨테이너 식별: data-tabs
• 탭 리스트: .dewp-tabs, 버튼: .dewp-tab-btn[data-tab]
• 패널 컨테이너: .dewp-tab-content, 패널: .dewp-tab-panel[data-panel]