Tabs
UpdatedAnatomy
<Tabs> <TabsList> <TabsTrigger /> </TabsList> <TabsContent /></Tabs>
Usage
To display a set of tabs, compose <Tabs>
, <TabsList>
, <TabsTrigger>
, and <TabsContent>
. You must set matching value
props for <TabsTrigger>
and <TabsContent>
to link them together. You will probably want to set a defaultValue
on <Tabs>
to initialize the default tab.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
export default () => ( <Tabs defaultValue="account"> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="documents">Documents</TabsTrigger> <TabsTrigger value="settings">Settings</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents">Access and update documents.</TabsContent> <TabsContent value="settings">Edit settings or contact info.</TabsContent> </Tabs>);
Variants
The default variant
of <TabsList>
is "underline"
. To display tabs styled like switches, set variant
to "switch"
.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
export default () => ( <Tabs defaultValue="account"> <TabsList variant="switch"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="documents">Documents</TabsTrigger> <TabsTrigger value="settings">Settings</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents">Access and update documents.</TabsContent> <TabsContent value="settings">Edit settings or contact info.</TabsContent> </Tabs>);
Tab counts
Display counts beside a tab by passing a value to count
on <TabsTrigger>
.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";
export default () => ( <Tabs defaultValue="account"> <div className="flex flex-col items-center gap-10"> <div> <TabsList> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="documents" count={48}> Documents </TabsTrigger> <TabsTrigger value="settings">Settings</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> <div> <TabsList variant="switch"> <TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="documents" count={48}> Documents </TabsTrigger> <TabsTrigger value="settings">Settings</TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> </div> </Tabs>);
Icons
Import any icons from Font Awesome and pass them to the icon
prop on <TabsTrigger>
.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";
export default () => ( <Tabs defaultValue="account"> <div className="flex flex-col items-center gap-10"> <div> <TabsList> <TabsTrigger value="account" icon={faUser}> Account </TabsTrigger> <TabsTrigger value="documents" icon={faFile} count={48}> Documents </TabsTrigger> <TabsTrigger value="settings" icon={faSliders}> Settings </TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> <div> <TabsList variant="switch"> <TabsTrigger value="account" icon={faUser}> Account </TabsTrigger> <TabsTrigger value="documents" icon={faFile} count={48}> Documents </TabsTrigger> <TabsTrigger value="settings" icon={faSliders}> Settings </TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> </div> </Tabs>);
Dark mode
Set theme
to dark
to display the tabs on a dark background.
Disabled
Individual tabs can be disabled by setting disabled
on <TabsTrigger>
.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "stylus-ui/Tabs";import { faUser, faFile, faSliders } from "@fortawesome/pro-regular-svg-icons";
export default () => ( <Tabs defaultValue="account"> <div className="flex flex-col items-center gap-10"> <div> <TabsList> <TabsTrigger value="account" icon={faUser}> Account </TabsTrigger> <TabsTrigger value="documents" icon={faFile} count={48} disabled> Documents </TabsTrigger> <TabsTrigger value="settings" icon={faSliders}> Settings </TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> <div> <TabsList variant="switch"> <TabsTrigger value="account" icon={faUser}> Account </TabsTrigger> <TabsTrigger value="documents" icon={faFile} count={48} disabled> Documents </TabsTrigger> <TabsTrigger value="settings" icon={faSliders}> Settings </TabsTrigger> </TabsList> <TabsContent value="account">Make changes to your account.</TabsContent> <TabsContent value="documents"> Access and update documents. </TabsContent> <TabsContent value="settings"> Edit settings or contact info. </TabsContent> </div> </div> </Tabs>);
Orientation
API Reference
Tabs
Contains all the tabs component parts.
Inherits properties from HTMLElement
.
Prop | Type | Default |
---|---|---|
activationMode | "automatic" "manual" | |
asChild | boolean | false |
defaultValue | string | |
onValueChange | (value: string) => void | |
orientation | "horizontal" "vertical" | "horizontal" |
theme | "light" "dark" | "light" |
value | string |
TabsList
Contains the triggers that are aligned along the edge of the active content.
Inherits properties from HTMLElement
.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
className | string | |
loop | boolean | true |
variant | "underline" "switch" | "underline" |
TabsTrigger
The button that activates its associated content.
Inherits properties from HTMLButtonElement
.
Prop | Type | Default |
---|---|---|
value | string | |
asChild | boolean | false |
count | number string | |
disabled | boolean | false |
icon | IconDefinition |
TabsContent
Contains the content associated with each trigger.
Inherits properties from HTMLElement
.
Prop | Type | Default |
---|---|---|
value | string | |
asChild | boolean | false |
className | string | |
forceMount | boolean |