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.
<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.
<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.
<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
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: key: string · label: ReactNode · icon?: ReactNode (default icon) · activeIcon?: ReactNode (activated state, default reuse icon) · dot?: boolean (red dot) · badge?: ReactNode (corner mark, takes precedence over dot) · disabled?: boolean.
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