GuidesModules
Tabs
Compose controlled tab navigation with the Tab components
- Stable unknown
- Release candidate since 1.16.1-rc.3
- Development since 1.16.1-dev.2111+9796905
Use Tab for a small set of sibling views that share one screen context. The
component is controlled: keep the active tab in application state and use
onChange to switch the displayed content.
import { Tab } from "@ovok/native/tab";
<Tab value={activeTab} onChange={setActiveTab}>
<Tab.Item value="overview">Overview</Tab.Item>
<Tab.Item value="history">History</Tab.Item>
</Tab>Render the selected panel from the same activeTab value. Use TabProvider and
useTab when a custom tab bar needs the shared value and callback without the
default Tab rendering. For top-level app navigation, use your router's navigation
model rather than using tabs as a substitute for routes.
References
API reference
Every export of @ovok/native/tab, with signatures, props and types, is in the tab API reference.
Last updated on