Mobile Analytics Controls

/mobile-analytics-controls 데모에 사용된 MobileSubToolbar, MobileToolbarChip 문서입니다. 두 컴포넌트는 필터와 탐색 탭의 표현·선택 이벤트를 제공하며 실제 필터 상태는 호스트가 관리합니다.

인터랙티브 데모

탭을 선택하거나 기간 필터를 변경하세요. 탭 모양과 필터 비활성 상태도 전환할 수 있습니다.

MobileSubToolbar

mode로 페이지 이동 메뉴와 탭 동작을 구분합니다. variant는 pill 또는 underline 스타일을 선택합니다.

Prop	타입	필수	설명
ariaLabel	string	예	툴바 접근성 이름
items	MobileSubToolbarItem[]	예	항목 목록 (key, label, 선택적 href)
mode	'navigation' | 'tabs'	예	링크 탐색 또는 탭 선택
selectedKey	string	예	현재 선택된 항목
variant	'pill' | 'underline'	예	표시 스타일
panelId	string	아니요	탭 패널 연결 ID
testId	string	아니요	테스트용 식별자
fadeColor	string	아니요	가로 스크롤 끝의 페이드 색상

select(key, event?) 이벤트는 항목 선택을 전달합니다. leading, trailing 슬롯에 툴바 양쪽의 보조 콘텐츠를 넣을 수 있습니다. 탭 모드에서는 좌우 화살표와 Home/End 키로 항목을 이동할 수 있습니다.

MobileToolbarChip

필터·기간 선택처럼 메뉴를 여는 툴바 버튼입니다.

Prop	타입	기본값	설명
label	string	필수	표시 라벨
ariaLabel	string	미지정	접근성 라벨
expanded	boolean	false	메뉴 열림 상태
disabled	boolean	false	비활성화 여부
dropdown	boolean	true	드롭다운 표시 여부

클릭 시 click 이벤트를 보냅니다. 실제 팝오버나 필터 상태는 호스트 앱이 관리합니다.