49 lines
1.2 KiB
Markdown
49 lines
1.2 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Tabs
|
|
- rx.chakra.TabList
|
|
- rx.chakra.Tab
|
|
- rx.chakra.TabPanel
|
|
- rx.chakra.TabPanels
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# 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.
|
|
|
|
```python demo
|
|
rx.chakra.tabs(
|
|
rx.chakra.tab_list(
|
|
rx.chakra.tab("Tab 1"),
|
|
rx.chakra.tab("Tab 2"),
|
|
rx.chakra.tab("Tab 3"),
|
|
),
|
|
rx.chakra.tab_panels(
|
|
rx.chakra.tab_panel(rx.chakra.text("Text from tab 1.")),
|
|
rx.chakra.tab_panel(rx.chakra.checkbox("Text from tab 2.")),
|
|
rx.chakra.tab_panel(rx.chakra.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.
|
|
|
|
```python demo
|
|
rx.chakra.tabs(
|
|
items = [("Tab 1", rx.chakra.text("Text from tab 1.")), ("Tab 2", rx.chakra.checkbox("Text from tab 2.")), ("Tab 3", rx.chakra.button("Text from tab 3.", color="black"))],
|
|
bg="black",
|
|
color="white",
|
|
shadow="lg",
|
|
)
|
|
```
|