TabBar
tab-barProvides safe-area-aware bottom navigation for mobile application sections.
Usage
Basic usage
items driver; for uncontrolled use defaultValue Set the initial item, and the active item is highlighted text-primary.
tsx
<TabBar
defaultValue="home"
items={[
{ key: "home", label: "Home", icon: <Home /> },
{ key: "find", label: "Discover", icon: <Search /> },
{ key: "me", label: "My", icon: <User /> },
]}
/>Corner mark and red dot
item.badge displays a digital corner mark (priority to dot), item.dot displays a red dot.
tsx
<TabBar
defaultValue="home"
items={[
{ key: "home", label: "Home", icon: <Home /> },
{ key: "find", label: "Discover", icon: <Search />, dot: true },
{ key: "plan", label: "Schedule", icon: <Calendar />, badge: 5 },
{ key: "me", label: "My", icon: <User /> },
]}
/>Disabled item
item.disabled is grayed out and unclickable.
tsx
<TabBar
defaultValue="home"
items={[
{ key: "home", label: "Home", icon: <Home /> },
{ key: "plan", label: "Schedule", icon: <Calendar />, disabled: true },
{ key: "me", label: "My", icon: <User /> },
]}
/>When to Use
Use it for top-level mobile navigation such as Home, Discover, and Profile. Use Fab for a single contextual action, or ActionSheet for a temporary list of actions.
Import
ts
import { TabBar } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
items * | TabBarItem[] | - | Page tag data (see below) |
value | string | - | Controlled activation key |
defaultValue | string | First key | Uncontrolled initial key |
safeArea | boolean | true | Adds the bottom safe-area inset |
fixed | boolean | true | fixed to the bottom; false to follow the document flow |
aria-label | string | Locale value | Accessible navigation landmark label; an explicit value takes precedence. |
className | string | - | - |
TabBarItem
| Name | Type | Default | Description |
|---|---|---|---|
| key * | string | - | Unique key, also the value used by value. |
| label * | ReactNode | - | Tab text. |
| icon | ReactNode | - | Default-state icon. |
| activeIcon | ReactNode | Reuses icon | Active-state icon. |
| dot | boolean | false | Red-dot indicator. |
| badge | ReactNode | - | Corner-mark content (number or text); takes precedence over dot. |
| disabled | boolean | false | Disables the tab. |
Events
| Event | Type | Description |
|---|---|---|
onChange | (key: string) => void | Switch tab callback |
Usage Guidelines
- Default
fixedsticks to the bottom of the viewport + eats the bottom safe area. When putting it into a mobile phone frame/container for demonstration,fixed={false}must be included in the document flow, otherwise it will float to the bottom of the page; addsafeArea={false}when no safe area is needed in the container. - When
badgeanddotare supplied at the same time,badgetakes priority. - The navigation landmark follows
ConfigProvider locale;enUSprovides “Bottom navigation”, and the no-provider fallback remains Chinese.
Related
Fab · ActionSheet · Picker · SwipeAction · PullToRefresh · SafeArea