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

Renderizado dinámico

Match

rx.match

Documentación oficial

Pedido del taller

Pon un badge de estado del pedido en la pantalla de pedidos a domicilio. Recibido, en cocina, en reparto, entregado y cancelado deben tener cada uno su icono y su color.

rx.match compara un valor con varios casos y muestra el componente del caso que coincide. Es la misma idea que match·case en Python. rx.cond solo elige entre dos ramas, así que con tres o más, rx.match se lee mucho mejor que anidar rx.cond. Tiene esta forma:

rx.match(
    condition,
    (case_1, component_1),
    (case_2, component_2),
    ...
    default_component,
)

Primer argumento (condition): el valor que se compara. Normalmente una variable del State.
Tuplas (caso, componente): si el valor es igual al caso, se muestra ese componente. Se comparan en orden, de arriba abajo.
El último argumento que no es una tupla: el valor por defecto (default) cuando no coincide ningún caso.

Abajo, al elegir una raza aparece la frase correspondiente, y si eliges pug·corgi, que están en la lista pero no tienen caso, aparece el valor por defecto.

Unknown cat breed selected.

class MatchBasicState(rx.State):
    cat_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "ragdoll", "pug", "corgi"]

    @rx.event
    def set_cat_breed(self, breed: str):
        self.cat_breed = breed


rx.flex(
    rx.match(
        MatchBasicState.cat_breed,
        ("persian", rx.text("Persian cat selected.")),
        ("siamese", rx.text("Siamese cat selected.")),
        ("maine coon", rx.text("Maine Coon cat selected.")),
        ("ragdoll", rx.text("Ragdoll cat selected.")),
        rx.text("Unknown cat breed selected."),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick a breed"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchBasicState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchBasicState.cat_breed,
        on_change=MatchBasicState.set_cat_breed,
    ),
    direction="column",
    spacing="2",
)

Prueba el valor

rx.match no tiene propiedades de aspecto, así que lo que cambias es el valor que se compara. Si escribes varios casos, como en la segunda tupla, basta con que coincida uno. En una app real, en lugar de "paid" iría una variable del State.

Prueba las propiedades

Paid

status

rx.match(
    "paid",
    ("paid", rx.badge(rx.icon("credit-card", size=14), "Paid", color_scheme="blue")),
    ("packing", "shipping", rx.badge(rx.icon("truck", size=14), "On the way", color_scheme="orange")),
    ("done", rx.badge(rx.icon("circle-check", size=14), "Delivered", color_scheme="green")),
    rx.badge(rx.icon("circle-help", size=14), "Unknown", color_scheme="gray"),
)

packing y shipping usan el mismo badge. Un valor sin caso (refunded) acaba en el valor por defecto del final.

Argumento	Valores	Uso
Primero (`cond`)	Var o valor	El valor que se compara
`(caso, …, resultado)`	Tupla (2 o más)	Si coincide con alguno de los valores anteriores, devuelve el último elemento
Último argumento	Componente o valor	Valor por defecto. Si el resultado es un componente, se puede omitir (un `rx.fragment()` vacío)

Reglas del valor por defecto

El valor por defecto es el argumento que no es tupla y va al final. Todo argumento que no sea tupla se toma como valor por defecto, así que ponerlo en medio da error.
Solo hay un valor por defecto. Poner dos da error.
Si el resultado es un componente, el valor por defecto se puede omitir, y entonces lo es rx.fragment() (nada).
Si el resultado es un valor que no es un componente (una cadena, por ejemplo), el valor por defecto es obligatorio.
Una tupla de caso debe tener al menos dos elementos: el caso y el resultado.

El código de abajo muestra esas reglas en orden; todos menos el número 3 dan error al construirse.

# 1) default is not last -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    rx.text("Unknown cat breed selected."),
    ("siamese", rx.text("siamese cat selected")),
)

# 2) two defaults -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
    rx.text("Unknown cat breed selected."),
    rx.text("Another unknown cat breed selected."),
)

# 3) OK: components without a default -> rx.fragment() is the default
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
)

# 4) plain values without a default -> error
rx.match(
    MatchState.cat_breed,
    ("persian", "persian cat selected"),
    ("siamese", "siamese cat selected"),
)

# 5) a case tuple needs at least two items -> error
rx.match(
    MatchState.cat_breed,
    ("persian",),
    ("maine coon", rx.text("Maine Coon cat selected")),
)

Varios valores en un mismo caso

Escribe varios casos dentro de la tupla y pon el resultado al final. El último elemento de la tupla es siempre el resultado. Aquí se agrupan tres razas de gato, dos de perro y dos de caballo, cada grupo con una sola frase. football y golf no están en ningún sitio, así que aparece el valor por defecto.

Unknown animal breed

class MatchMultiState(rx.State):
    animal_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "pug", "corgi", "mustang", "rahvan", "football", "golf"]

    @rx.event
    def set_animal_breed(self, breed: str):
        self.animal_breed = breed


rx.flex(
    rx.match(
        MatchMultiState.animal_breed,
        ("persian", "siamese", "maine coon", rx.text("Breeds of cats.")),
        ("pug", "corgi", rx.text("Breeds of dogs.")),
        ("mustang", "rahvan", rx.text("Breeds of horses.")),
        rx.text("Unknown animal breed"),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick one"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchMultiState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchMultiState.animal_breed,
        on_change=MatchMultiState.set_animal_breed,
    ),
    direction="column",
    spacing="2",
)

Como valor de una propiedad

Igual que rx.cond, rx.match también puede ir en el lugar de una propiedad si el resultado es un valor. El color_scheme del badge de abajo es red si el valor es 1, blue si es 2, purple si es 6, orange si es 10 y green en cualquier otro caso. Los casos también pueden ser números.

class MatchPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchPropState.decr, color_scheme="red"),
    rx.badge(
        MatchPropState.value,
        color_scheme=rx.match(
            MatchPropState.value,
            (1, "red"),
            (2, "blue"),
            (6, "purple"),
            (10, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchPropState.incr),
    align_items="center",
    spacing="3",
)

Agrupar varios valores en un caso funciona igual en las propiedades. 1·3·9 son red, 2·4·5 blue, 6·8·12 purple y 10·15·20·25 orange.

class MatchMultiPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchMultiPropState.decr, color_scheme="red"),
    rx.badge(
        MatchMultiPropState.value,
        color_scheme=rx.match(
            MatchMultiPropState.value,
            (1, 3, 9, "red"),
            (2, 4, 5, "blue"),
            (6, 8, 12, "purple"),
            (10, 15, 20, 25, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchMultiPropState.incr),
    align_items="center",
    spacing="3",
)

Para verdadero/falso, cond

rx.match sirve para comparar con varios valores. Si el valor solo puede ser True/False, lo adecuado es rx.cond, como en rx.cond(State.value == 10, "true value", "false value").

Completar el pedido

Una sola cadena de estado se reparte en cinco ramas. El último, cancelled, no se escribe como caso, sino que lo recoge el valor por defecto. Al pulsar el botón se pasa al estado siguiente.

Receivedreceived

MATCH_ORDER_STEPS = ["received", "cooking", "delivering", "delivered", "cancelled"]


class MatchOrderState(rx.State):
    status: str = "received"

    @rx.event
    def next_step(self):
        i = MATCH_ORDER_STEPS.index(self.status)
        self.status = MATCH_ORDER_STEPS[(i + 1) % len(MATCH_ORDER_STEPS)]


rx.hstack(
    rx.match(
        MatchOrderState.status,
        ("received", rx.badge(rx.icon("clipboard-check", size=14), "Received", color_scheme="gray")),
        ("cooking", rx.badge(rx.icon("chef-hat", size=14), "Cooking", color_scheme="amber")),
        ("delivering", rx.badge(rx.icon("bike", size=14), "On the way", color_scheme="blue")),
        ("delivered", rx.badge(rx.icon("house", size=14), "Delivered", color_scheme="green")),
        rx.badge(rx.icon("ban", size=14), "Cancelled", color_scheme="red"),
    ),
    rx.button("Next status", on_click=MatchOrderState.next_step, size="1", variant="soft"),
    rx.code(MatchOrderState.status),
    align="center",
    spacing="3",
)

Notas del taller

rx.match(valor, (caso, resultado), ..., valor por defecto). Con tres ramas o más, en lugar de anidar cond.
Varios casos en una tupla: ("a", "b", resultado). El último elemento de la tupla es el resultado.
Un único valor por defecto, al final. Si el resultado es un componente, se puede omitir; si es un valor, es obligatorio.
Si el resultado es un valor, puede ir en propiedades como color_scheme.
Para dos ramas, verdadero/falso: rx.cond.

← Anterior

Renderizado dinámico · Cond

Renderizado dinámico · Foreach

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