Tabs
Tabs are a set of layered sections of content—known as tab panels that are displayed one at a time. They facilitate the organization and navigation between sets of content that share a connection and exist at a similar level of hierarchy.
Basic Example
The tabs component is made up of a rx.tabs.root which groups rx.tabs.list and rx.tabs.content parts.
Styling
Default value
We use the default_value prop to set a default active tab, this will select the specified tab by default.
item on tab 2
Orientation
We use orientation prop to set the orientation of the tabs component to vertical or horizontal. By default, the orientation
will be set to horizontal. Setting this value will change both the visual orientation and the functional orientation.
vertical, the up and down arrow keys moves focus between the next or previous tab,
while for horizontal, the left and right arrow keys moves focus between tabs.item on tab 1
item on tab 1
Value
We use the value prop to specify the controlled value of the tab that we want to activate. This property should be used in conjunction with the on_change event argument.
tab1 clicked !
items on tab 1
ExpandCollapse
Tablist
The Tablist is used to list the respective tabs to the tab component
Tab Trigger
This is the button that activates the tab's associated content. It is typically used in the Tablist
Styling
Value
We use the value prop to assign a unique value that associates the trigger with content.
Disable
We use the disabled prop to disable the tab.
Tabs Content
Contains the content associated with each trigger.
Styling
Value
We use the value prop to assign a unique value that associates the content with a trigger.
API Reference
rx.tabs.root
Set of content sections to be displayed one at a time.
orientationProps
| Prop | Type | Description |
|---|---|---|
default_value | str | The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs. |
value | str | The controlled value of the tab that should be active. Use when you need to control the state of the tabs. |
orientation | "vertical""horizontal" | The orientation of the tabs. |
dir | "ltr""rtl" | Reading direction of the tabs. |
activation_mode | "automatic""manual" | The mode of activation for the tabs. "automatic" will activate the tab when focused. "manual" will activate the tab when clicked. |
rx.tabs.list
Contains the triggers that sit alongside the active content.
sizeProps
| Prop | Type | Description |
|---|---|---|
size | "1""2" | Tabs size "1" - "2". |
loop | bool | When true, the tabs will loop when reaching the end. |
Event Triggers
See the full list of default event triggersrx.tabs.trigger
The button that activates its associated content.
disabledcolor_schemeProps
| Prop | Type | Description |
|---|---|---|
value | str | The value of the tab. Must be unique for each tab. |
disabled | bool | Whether the tab is disabled. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | The color of the line under the tab when active. |
Event Triggers
See the full list of default event triggersrx.tabs.content
Contains the content associated with each trigger.
Props
| Prop | Type | Description |
|---|---|---|
value | str | The value of the tab. Must be unique for each tab. |
force_mount | bool | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |