Components
Tabs
Tabs allow users to navigate to specific content sections. Before hydration, each tab functions as a link, and every click triggers a server-side render of the current page. Once hydration is complete, switching between tabs becomes a client-side action, similar to what you typically see.
Props
idstringRequired
A unique id for the tabs. Used as the key of the query parameter of the redirect url before hydration.
urlstringRequired
The url of the current page. Used to redirect users before hydration. It should also be available on the server side.
valuestring
The selected tab. Used when you want controlled tabs
defaultValuestring
The default selected tab.
Plus all props from Radix UI Tabs
Usage
function Tabs() {
const { pathname, search } = useLocation(); // Get current url. It should also be available on the server side
const tabsProps = useTabs({
id: "tabs-id",
url: pathname + search,
defaultValue: "a",
});
return (
<Tabs {...tabsProps}>
<TabsList>
<TabsTrigger value="a">A</TabsTrigger>
<TabsTrigger value="b">B</TabsTrigger>
<TabsTrigger value="c">C</TabsTrigger>
</TabsList>
<TabsContent value="a">
A
</TabsContent>
<TabsContent value="b">
B
</TabsContent>
<TabsContent value="c">
C
</TabsContent>
</Tabs>
)
}
Behaviors
Before hydration- All tabs are implemented as <a> tags, so when a tab is clicked, the user will be redirected to the same page with different content
- Supports keyboard navigation
- Can access the active value from tabs when the active tab changes
- Preserves all internal states, including user actions on tabs before hydration. For example, the checkbox state will be brought from the unhydrated world to the hydrated world
Recipes
Examples you can implement based on Cotton UI Tabs. (currently only in Chinese)
