Tab Bars
모바일 및 태블릿에서 주요 화면 간 빠른 이동을 위한 하단 고정 네비게이션입니다.
개요
Tab Bars는 모바일 및 태블릿에서 화면 하단에 고정되어 주요 서비스 화면 간 빠른 이동을 제공하는 네비게이션 컴포넌트입니다. KRDS(한국형 웹 콘텐츠 접근성 지침)을 준수하여 공공 모바일 서비스에 최적화된 접근성과 사용성을 제공합니다.
Default - 활성화: 면 아이콘 + gray-95 + bold
Border - 활성화: 선 아이콘 + gray-95 + bold + border-top
설치
사용법
예제
기본 사용
아이콘과 라벨을 함께 사용하며, 최대 5개의 메뉴를 권장합니다.
Badge 표시
알림 개수 등을 표시할 수 있습니다. 99 이상은 '99+'로 표시됩니다.
활성 아이콘
선택 상태에서 다른 스타일의 아이콘을 표시하려면 activeIcon을 설정합니다.
주요 기능
- 하단 고정: 화면 하단에 고정되어 스크롤 시에도 항상 접근 가능합니다
- 최대 5개 메뉴: KRDS 가이드라인에 따라 최대 5개 메뉴를 권장합니다
- 아이콘 + 라벨: 아이콘과 라벨을 함께 사용하여 명확한 의미 전달
- 선택 상태 표시: 활성 메뉴는 더 굵은 아이콘과 색상 변화로 구분됩니다
- Badge 지원: 알림 개수 등을 표시할 수 있는 배지 기능
접근성
WCAG 2.1 / KWCAG 2.2 AA 레벨을 준수합니다.
- Semantic HTML:
<nav>요소를 사용하여 네비게이션 영역을 명확히 표시합니다 - ARIA Current:
aria-current="page"로 현재 선택된 메뉴를 표시합니다 - 키보드 네비게이션: Tab 키로 모든 메뉴에 접근 가능하며, Enter 키로 활성화합니다
- 포커스 표시: 키보드 포커스 시 명확한 아웃라인을 표시합니다
- Badge 접근성: 배지 숫자는
aria-label로 스크린 리더에 전달됩니다