✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Accordion
Accordions allow you to hide and show content in a container under a header.
Accordion consist of an outer accordion component and inner accordion items. Each item has a optional button and panel. The button is used to toggle the panel's visibility.
rx.accordion(
rx.accordion_item(
rx.accordion_button(
rx.heading("Example"),
rx.accordion_icon(),
),
rx.accordion_panel(
rx.text(
"This is an example of an accordion component."
)
),
),
allow_toggle=True,
width="100%",
)An accordion can have multiple items.
rx.accordion(
rx.accordion_item(
rx.accordion_button(
rx.heading("Example 1"),
rx.accordion_icon(),
),
rx.accordion_panel(
rx.text(
"This is an example of an accordion component."
)
),
),
rx.accordion_item(
rx.accordion_button(
rx.heading("Example 2"),
rx.accordion_icon(),
),
rx.accordion_panel(
rx.text(
"This is an example of an accordion component."
)
),
),
allow_multiple=True,
bg="black",
color="white",
width="100%",
)You can create multilevel accordions by nesting accordions within the outer accordion panel.
rx.accordion(
rx.accordion_item(
rx.accordion_button(
rx.accordion_icon(),
rx.heading("Outer"),
),
rx.accordion_panel(
rx.accordion(
rx.accordion_item(
rx.accordion_button(
rx.accordion_icon(),
rx.heading("Inner"),
),
rx.accordion_panel(
rx.badge(
"Inner Panel",
variant="solid",
color_scheme="green",
),
),
)
),
),
),
width="100%",
)You can also create an accordion using the shorthand syntax. Pass a list of tuples to the
items prop. Each tuple should contain a label and a panel.rx.accordion(
items=[
("Label 1", rx.center("Panel 1")),
("Label 2", rx.center("Panel 2")),
],
width="100%",
)Accordion
The wrapper that uses cloneElement to pass props to AccordionItem children.
Base Event Triggers
AccordionItem
A single accordion item.
Base Event Triggers
The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading.
No props for AccordionButton.
Base Event Triggers
AccordionPanel
The container for the details to be revealed.
No props for AccordionPanel.
Base Event Triggers
AccordionIcon
A chevron-down icon that rotates based on the expanded/collapsed state.
No props for AccordionIcon.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.