✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Tabs
Tab components allow you display content in multiple pages within a container. These page are organized by a tab list and the corresponding tab panel can take in children components if needed.
Text from tab 1.
rx.tabs(
rx.tab_list(
rx.tab("Tab 1"),
rx.tab("Tab 2"),
rx.tab("Tab 3"),
),
rx.tab_panels(
rx.tab_panel(rx.text("Text from tab 1.")),
rx.tab_panel(rx.checkbox("Text from tab 2.")),
rx.tab_panel(
rx.button("Text from tab 3.", color="black")
),
),
bg="black",
color="white",
shadow="lg",
)You can create a tab component using the shorthand syntax. Pass a list of tuples to the
items prop. Each tuple should contain a label and a panel.Text from tab 1.
rx.tabs(
items=[
("Tab 1", rx.text("Text from tab 1.")),
("Tab 2", rx.checkbox("Text from tab 2.")),
(
"Tab 3",
rx.button("Text from tab 3.", color="black"),
),
],
bg="black",
color="white",
shadow="lg",
)Tabs
An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components.
Base Event Triggers
Tab
An element that serves as a label for one of the tab panels and can be activated to display that panel..
Base Event Triggers
TabList
Wrapper for the Tab components.
No props for TabList.
Base Event Triggers
TabPanel
An element that contains the content associated with a tab.
No props for TabPanel.
Base Event Triggers
TabPanels
Wrapper for the Tab components.
No props for TabPanels.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.