가이드 - 탭

Tabs

기본 사용법


            <%- include(`${_src}/views/components/tabs.ejs`, {
  size: 'lg',
  className: 'vits-mypage-top-tabs',
  tabClassName: 'vits-btn-md vits-my-coupon-tab-btn',
  tabs: [
    { text: '보유 쿠폰', badge: '22', isActive: true },
    { text: '쿠폰 받기', badge: 'N' }
  ],
  showBadge: true,
  ariaLabel: '마이페이지 쿠폰 탭',
  idPrefix: 'coupon-tab'
}) %>

배지 미사용 / 사이즈 sm


            <%- include(`${_src}/views/components/tabs.ejs`, {
  size: 'sm',
  className: 'vits-auth-tabs',
  tabClassName: 'vits-btn-md vits-auth-tab-btn',
  tabs: [
    { text: '이메일 인증', isActive: true },
    { text: '휴대폰인증', isActive: false }
  ],
  showBadge: false,
  ariaLabel: '인증 방법 탭',
  idPrefix: 'auth-tab'
}) %>

파라미터 설명


            - tabs: 필수 (array) - 탭 목록 [{ text, badge, isActive }]
- size: 선택 (string) - 'lg' | 'sm' (기본: 'lg')
- className: 선택 (string) - 탭 컨테이너 추가 클래스
- tabClassName: 선택 (string) - 탭 버튼 클래스 (기본: 'vits-btn-md')
- showBadge: 선택 (boolean) - 배지 노출 여부 (기본: true)
- idPrefix: 선택 (string) - 탭 버튼 id 접두어 (기본: 'tab')
- ariaLabel: 선택 (string) - tablist aria-label 텍스트 (기본: '탭')