ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Mostrar y ocultar

Accordion

rx.accordion.rootrx.accordion.itemrx.accordion.headerrx.accordion.triggerrx.accordion.iconrx.accordion.content

Documentación oficial

Pedido del taller

Pliega las «Preguntas frecuentes» del servicio de atención al cliente para que solo se vean las preguntas, y que la respuesta se despliegue al pulsar.

El acordeón apila títulos en vertical y, al pulsar un título, despliega el contenido que hay debajo. Se usa para plegar contenido que sería demasiado largo con todo desplegado, como preguntas frecuentes o grupos de ajustes. Dentro de rx.accordion.root van los rx.accordion.item, y cada item recibe un header (título) y un content (contenido).

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    width="300px",
)

Prueba las propiedades

Todas estas propiedades van en root. Si cambias type a multiple, puedes desplegar varios elementos a la vez.

Prueba las propiedades

type

collapsible

variant

color

radius

show_dividers

disabled

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="single",
    collapsible=True,
    variant="classic",
    color_scheme="indigo",
    radius="medium",
    show_dividers=True,
    disabled=False,
    width="300px",
)

Si desactivas collapsible, un elemento abierto no se cierra aunque lo vuelvas a pulsar. variant y color_scheme son el aspecto del fondo y el color.

Pieza	Propiedad	Valores	Uso
`root`	`type`	`"single"` (por defecto) `"multiple"`	Desplegar solo uno a la vez, o varios
`root`	`collapsible`	`True` / `False`	Permite cerrar un elemento abierto volviendo a pulsarlo
`root`	`default_value`	value de un item (lista si es multiple)	Elemento desplegado al principio
`root`	`value` + `on_value_change`	Valor del State, evento	Gestiona con el State los elementos desplegados
`root`	`disabled`	`True` / `False`	Impide pulsar todos los elementos
`root`	`orientation`	`"vertical"` (por defecto) `"horizontal"`	Dirección de las flechas del teclado
`root`	`variant`	`"classic"` (por defecto) `"soft"` `"surface"` `"outline"` `"ghost"`	Aspecto del fondo
`root`	`color_scheme` · `radius`	Nombre de color Radix, valor de esquinas	Color y esquinas
`root`	`show_dividers`	`True` / `False`	Líneas divisorias entre elementos
`root`	`duration` · `easing`	Milisegundos (por defecto 250), easing CSS	Animación al desplegar y plegar
`item`	`header` · `content`	Texto o componente	Título y contenido
`item`	`value`	Cadena	Etiqueta de este elemento; sin ella, un valor aleatorio
`item`	`disabled`	`True` / `False`	Impide pulsar solo este elemento

Desplegar varios

El valor por defecto de type, "single", despliega solo uno a la vez: al abrir otro, el anterior se pliega. Con "multiple" puedes tener varios elementos desplegados a la vez.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    type="multiple",
    collapsible=True,
    width="300px",
)

Elementos desplegados al principio

Si das a default_value el value de un item, ese elemento aparece desplegado desde el principio. Por eso hay que poner a mano un value en cada item (si no, Reflex genera un valor aleatorio). Con type="multiple", se da una lista como ["item_1", "item_3"].

The second accordion item's content

rx.accordion.root(
    rx.accordion.item(header="First Item", content="The first accordion item's content", value="item_1"),
    rx.accordion.item(header="Second Item", content="The second accordion item's content", value="item_2"),
    rx.accordion.item(header="Third item", content="The third accordion item's content", value="item_3"),
    default_value="item_2",
    collapsible=True,
    width="300px",
)

Volver a cerrar y bloquear

Con collapsible=True puedes cerrar un elemento abierto volviendo a pulsarlo. Con False, una vez abierto uno, siempre queda uno abierto.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="collapsible=True", content="Click the header again to close me."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="collapsible=False", content="Once open, one item always stays open."),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=False,
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

disabled=True en root impide pulsar todos los elementos; en un item, solo ese.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="Whole root disabled", content="You cannot open this."),
        rx.accordion.item(header="Second Item", content="You cannot open this either."),
        disabled=True,
        collapsible=True,
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="Disabled item", content="You cannot open this.", disabled=True),
        rx.accordion.item(header="Open me", content="This item still works."),
        collapsible=True,
        color_scheme="blue",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Orientación

orientation no cambia el aspecto, solo el comportamiento del teclado. Con "vertical", el valor por defecto, te mueves entre títulos con las flechas arriba y abajo; con "horizontal", con izquierda y derecha. Pulsa uno de los títulos de abajo y prueba las flechas.

rx.accordion.root(
    rx.accordion.item(header="First Item", content="Use the left and right arrow keys."),
    rx.accordion.item(header="Second Item", content="The second accordion item's content"),
    rx.accordion.item(header="Third item", content="The third accordion item's content"),
    orientation="horizontal",
    collapsible=True,
    width="300px",
)

Aspecto y color

variant tiene cinco opciones. classic rellena con fuerza con el color del tema, soft con un tono suave, surface y outline dibujan un borde, y ghost no lleva fondo.

rx.grid(
    *[
        rx.accordion.root(
            rx.accordion.item(header=v, content="Variant " + v),
            rx.accordion.item(header="Second Item", content="The second accordion item's content"),
            collapsible=True,
            variant=v,
        )
        for v in ["classic", "soft", "surface", "outline", "ghost"]
    ],
    columns="repeat(auto-fill, minmax(200px, 1fr))",
    spacing="3",
    width="100%",
)

color_scheme fija el color del acordeón con independencia del tema.

rx.flex(
    rx.accordion.root(
        rx.accordion.item(header="grass", content="color_scheme='grass'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        color_scheme="grass",
        width="260px",
    ),
    rx.accordion.root(
        rx.accordion.item(header="crimson", content="color_scheme='crimson'"),
        rx.accordion.item(header="Second Item", content="The second accordion item's content"),
        collapsible=True,
        variant="soft",
        color_scheme="crimson",
        width="260px",
    ),
    spacing="3",
    wrap="wrap",
)

Gestionar con el State los elementos desplegados

Si das a value un valor del State y lo cambias en on_value_change, el servidor sabe qué elemento está desplegado. También puedes desplegar un elemento concreto o plegarlos todos con un botón. Cuando todo está plegado, llega una cadena vacía. En content cabe no solo texto, también componentes como botones.

Open: item_1

class AccordionOpenState(rx.State):
    value: str = "item_1"

    @rx.event
    def change_accordion(self, value: str | list[str]):
        self.value = value if isinstance(value, str) else ""

    @rx.event
    def open_accordion_item(self, value: str):
        self.value = value


rx.vstack(
    rx.text("Open: ", rx.cond(AccordionOpenState.value != "", AccordionOpenState.value, "(none)")),
    rx.hstack(
        rx.button("Open 3", on_click=AccordionOpenState.open_accordion_item("item_3"), size="1", variant="soft"),
        rx.button("Close all", on_click=AccordionOpenState.open_accordion_item(""), size="1", variant="soft", color_scheme="gray"),
    ),
    rx.accordion.root(
        rx.accordion.item(header="Is it accessible?", content=rx.button("Test button"), value="item_1"),
        rx.accordion.item(header="Is it unstyled?", content="It is styled by Reflex, and you can change the look.", value="item_2"),
        rx.accordion.item(header="Is it finished?", content="Yes, it is ready to use.", value="item_3"),
        collapsible=True,
        value=AccordionOpenState.value,
        on_value_change=AccordionOpenState.change_accordion,
        width="300px",
    ),
)

Montarlo pieza a pieza

header= y content= son atajos. Reflex 0.10 tiene también las piezas que los forman, rx.accordion.header, rx.accordion.trigger (la zona que se pulsa), rx.accordion.icon (la flecha de despliegue) y rx.accordion.content, para montarlas a mano como hijos del item. Sirven para afinar el aspecto, por ejemplo poniendo un icono en el título. La página de la documentación oficial no menciona estas piezas.

rx.accordion.root(
    rx.accordion.item(
        rx.accordion.header(
            rx.accordion.trigger(
                rx.hstack(rx.icon("package", size=16), rx.text("Custom header"), align="center"),
                rx.accordion.icon(),
            ),
        ),
        rx.accordion.content(
            rx.text("Built from header, trigger, icon and content."),
        ),
        value="parts",
    ),
    collapsible=True,
    width="300px",
)

Completar el pedido

Lo dejamos en multiple para poder desplegar varias preguntas a la vez, y lo aligeramos con ghost y líneas divisorias.

rx.accordion.root(
    rx.accordion.item(
        header="How long does shipping take?",
        content="Orders ship within 1 business day and arrive in 2 to 4 days.",
        value="shipping",
    ),
    rx.accordion.item(
        header="Can I return an item?",
        content="Yes. You can return unused items within 30 days.",
        value="returns",
    ),
    rx.accordion.item(
        header="Do you ship abroad?",
        content="Not yet. We only ship within the country for now.",
        value="abroad",
    ),
    type="multiple",
    collapsible=True,
    variant="ghost",
    show_dividers=True,
    width="100%",
    max_width="460px",
)

Notas del taller

Dentro de accordion.root van los accordion.item(header=…, content=…).
type: single (por defecto) · multiple; con collapsible=True se cierra al volver a pulsar.
Para usar default_value o value, pon un value a mano en cada item. Controlado: value + on_value_change.
orientation solo cambia la dirección del teclado. Cinco variant, color_scheme y show_dividers.
Para afinar el aspecto, móntalo con las piezas header · trigger · icon · content (0.10).

← Anterior

Mostrar y ocultar · Tabs

Mostrar y ocultar · Segmented Control

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex