TabBar

하단 3탭(오늘·기록·나) Glass 막대.

개요

미리보기

예시 언어동작 줄이기

active

variant

이름	타입	기본값	설명
`active?`	`'today' \| 'records' \| 'you'`	`today`	지금 화면. 링크에 aria-current="page".
`badge?`	`number`	—	오늘 탭의 검토 필요 수. 0이면 없음. 새 기록 수·활동량에는 쓰지 않는다.
`variant?`	`'bar' \| 'capsule'`	`bar`	bar는 폰의 전체 폭 막대, capsule은 iPad의 떠 있는 캡슐.
`hrefs?`	`Record<'today' \| 'records' \| 'you', string>`	—	목적지. 기본 /today, /records, /you.
`onReselect?: (tab) => void`	—	—	현재 탭을 다시 누르면 호출된다(AppShell이 맨 위로 스크롤하고 h1에 초점).
`ref`	—	—	ref는 <nav>로 전달된다.
그 밖의 속성	—	—	id, aria-label(기본 “주요”) 등 네이티브 nav 속성은 그대로 전달된다. className·style·children은 받지 않는다.

이렇게 · 이렇게 하지 않기

이렇게 탭은 오늘·기록·나 세 개로 고정하고 순서를 바꾸지 않는다.

이렇게 배지는 검토 필요 수에만 쓰고 0이면 표시하지 않는다.

이렇게 하지 않기 색 점만으로 상태를 알리지 않는다. 아이콘을 튕기지 않는다.

이렇게 하지 않기 tablist로 만들지 않는다. URL이 바뀌는 이동이므로 링크다.

토큰과 속성

이름	타입	기본값	설명
`active?`	`'today' \| 'records' \| 'you'`	`today`	지금 화면. 링크에 aria-current="page".
`badge?`	`number`	—	오늘 탭의 검토 필요 수. 0이면 없음. 새 기록 수·활동량에는 쓰지 않는다.
`variant?`	`'bar' \| 'capsule'`	`bar`	bar는 폰의 전체 폭 막대, capsule은 iPad의 떠 있는 캡슐.
`hrefs?`	`Record<'today' \| 'records' \| 'you', string>`	—	목적지. 기본 /today, /records, /you.
`onReselect?: (tab) => void`	—	—	현재 탭을 다시 누르면 호출된다(AppShell이 맨 위로 스크롤하고 h1에 초점).
`ref`	—	—	ref는 <nav>로 전달된다.
그 밖의 속성	—	—	id, aria-label(기본 “주요”) 등 네이티브 nav 속성은 그대로 전달된다. className·style·children은 받지 않는다.