Bottom Navigation
앱의 주요 메뉴를 화면 하단에 배치하여 주요 기능 간 빠른 이동을 돕는 내비게이션 컴포넌트입니다.
사용자가 필요한 메뉴를 커스텀할 수 있으며, 한 손 사용이 많은 모바일 환경에서 접근성을 높이기 위해 사용됩니다.
컴포넌트 명세 (Component Specification)
Anatomy
bottomNavigation
section
기본 기능
페이지를 이동할 수 있는 하단에 고정된 네비게이션
시각 옵션
right
left
상태
inactive
active
내부 구성
icon
button
text
하단 네비게이션 섹션 (Section)
하단 네비게이션의 한 영역을 차지하는 섹션입니다.
자주 찾는 메뉴로 빠르게 이동할 수 있습니다.
솔루션 버튼 사용자화 (Solution Button Menu)
사용자의 선호에 따라 솔루션 버튼을
좌측 또는 우측에 배치할 수 있습니다.
솔루션 버튼 활성화 (Solution Button Active)
솔루션 버튼을 활성화하면
전체 메뉴를 빠르게 확인할 수 있습니다.
메뉴 편집 (Menu Edit)
하단 네비게이션의 메뉴는 편집할 수 있습니다. 사용자의 필요에 따라 0개부터 최대 8개까지 설정할 수 있습니다.
Use Case (사용 예시)
하단 Home Indicator 영역과 겹치지 않도록 기준선 위에 배치하며, Indicator 뒤쪽 레이어에 위치하도록 사용합니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
Home
Portfolio