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

Cond

rx.cond

Documentación oficial

Pedido del taller

Pon un botón de inicio de sesión en la cabecera de la tienda online. Al iniciar sesión, en ese mismo sitio deben aparecer el nombre del usuario y un botón para cerrar sesión.

rx.cond(condición, A, B) muestra A si la condición es verdadera y B si es falsa. La condición suele ser un valor del State. El if de Python solo se ejecuta una vez, al construir la página, así que no puede cambiar la pantalla según un valor del State. Para volver a elegir cada vez que el valor cambia en el navegador, se usa rx.cond.

Text 1

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(
        CondBasicState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)

Prueba la condición

rx.cond no tiene propiedades de aspecto. En su lugar, activa y desactiva tú la condición. Si le das dos valores que no son componentes (aquí, nombres de color), como en la segunda línea, rx.cond se convierte en un Var que elige un valor en lugar de un componente, y puede ir en el lugar de una propiedad.

Prueba las propiedades

Text 1

Status

show

rx.hstack(
    rx.cond(
        True,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
    rx.badge(
        "Status",
        color_scheme=rx.cond(True, "green", "red"),
    ),
    spacing="4",
    align="center",
)

show decide qué texto se muestra; ok, el color_scheme del badge. En una app real, aquí iría un valor del State.

Argumento	Valores	Uso
Primero (`cond`)	Var (normalmente bool)	Criterio para elegir. Una cadena vacía, 0, una lista vacía, etc. cuentan como falso
Segundo	Componente o valor	Lo que se muestra si es verdadero
Tercero	Componente o valor	Lo que se muestra si es falso. Si es un componente, se puede omitir

Omitir el segundo componente

El tercer argumento se puede omitir. En ese caso, cuando la condición es falsa no se muestra nada. Sirve para "mostrar solo si existe". Cuando se usa como valor de una propiedad (dos valores), no se puede omitir.

This text appears when condition is True

This text is always visible

class CondOptionalState(rx.State):
    show_optional: bool = True

    @rx.event
    def toggle_optional(self):
        self.show_optional = not self.show_optional


rx.vstack(
    rx.button("Toggle", on_click=CondOptionalState.toggle_optional),
    rx.cond(
        CondOptionalState.show_optional,
        rx.text("This text appears when condition is True", color="green"),
    ),
    rx.text("This text is always visible", color="gray"),
)

Negación: ~

Si pones ~ delante de un Var, la condición se invierte (el not de Python). Con un Var no se puede usar not, así que se usa ~. Las dos líneas de abajo siempre se muestran al revés una de otra.

Text 1

Text 2

class CondBasicState(rx.State):
    show: bool = True

    @rx.event
    def change(self):
        self.show = not self.show


rx.vstack(
    rx.button("Toggle", on_click=CondBasicState.change),
    rx.cond(CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
    rx.cond(~CondBasicState.show, rx.text("Text 1", color="blue"), rx.text("Text 2", color="red")),
)

Varias condiciones: & y |

Entre Var se usan & (y) y | (o) en lugar de and·or. &·| se evalúan antes que >=, así que las comparaciones siempre van entre paréntesis. Abajo, entre 18 y 65 años se puede trabajar, y por debajo de 13 o desde 65 aparece un badge de descuento.

Age: 19

You can work!

import random


class CondComplexState(rx.State):
    age: int = 19

    @rx.event
    def change(self):
        self.age = random.randint(0, 100)


rx.vstack(
    rx.button("Random age", on_click=CondComplexState.change),
    rx.text(f"Age: {CondComplexState.age}"),
    rx.cond(
        (CondComplexState.age >= 18) & (CondComplexState.age <= 65),
        rx.text("You can work!", color="green"),
        rx.text("You cannot work!", color="red"),
    ),
    rx.cond(
        (CondComplexState.age < 13) | (CondComplexState.age >= 65),
        rx.badge("Discount ticket", color_scheme="orange"),
    ),
)

Anidar: if · elif · else

Si en el tercer hueco de rx.cond pones otro rx.cond, obtienes un elif. Abajo se distinguen positivo, cero y negativo.

0 is Zero!

import random


class CondNestedState(rx.State):
    num: int = 0

    @rx.event
    def change(self):
        self.num = random.randint(-10, 10)


rx.vstack(
    rx.button("Random number", on_click=CondNestedState.change),
    rx.cond(
        CondNestedState.num > 0,
        rx.text(f"{CondNestedState.num} is Positive!", color="orange"),
        rx.cond(
            CondNestedState.num == 0,
            rx.text(f"{CondNestedState.num} is Zero!", color="blue"),
            rx.text(f"{CondNestedState.num} is Negative!", color="red"),
        ),
    ),
)

Como ejemplo algo más complejo, aquí tienes código Python que busca el mayor de tres números y avisa si hay números iguales.

a = 8
b = 10
c = 2

if (a > b and a > c) and (a != b and a != c):
    print(a, " is the largest!")
elif (b > a and b > c) and (b != a and b != c):
    print(b, " is the largest!")
elif (c > a and c > b) and (c != a and c != b):
    print(c, " is the largest!")
else:
    print("Some of the numbers are equal!")

Trasladar la misma lógica a tres rx.cond anidados queda así. "Ser el mayor" significa ser mayor que los otros dos, así que no hace falta comprobar aparte que sean distintos. Pulsa Shuffle para ver también los casos en que salen números iguales. Si hay más ramas que estas, Match se lee mejor.

a=8 b=10 c=2

10 is the largest!

import random


class CondLargestState(rx.State):
    a: int = 8
    b: int = 10
    c: int = 2

    @rx.event
    def shuffle(self):
        self.a, self.b, self.c = (random.randint(1, 4) for _ in range(3))


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=CondLargestState.shuffle),
        rx.code(f"a={CondLargestState.a} b={CondLargestState.b} c={CondLargestState.c}"),
        align="center",
    ),
    rx.cond(
        (CondLargestState.a > CondLargestState.b) & (CondLargestState.a > CondLargestState.c),
        rx.text(f"{CondLargestState.a} is the largest!"),
        rx.cond(
            (CondLargestState.b > CondLargestState.a) & (CondLargestState.b > CondLargestState.c),
            rx.text(f"{CondLargestState.b} is the largest!"),
            rx.cond(
                (CondLargestState.c > CondLargestState.a) & (CondLargestState.c > CondLargestState.b),
                rx.text(f"{CondLargestState.c} is the largest!"),
                rx.text("Some of the numbers are equal!"),
            ),
        ),
    ),
)

Completar el pedido

Un solo valor, si hay sesión iniciada o no, cambia toda la zona derecha. Si es verdadero, se muestra el grupo de avatar, nombre y botón de cerrar sesión; si es falso, un único botón de inicio de sesión.

Shop

class CondLoginState(rx.State):
    logged_in: bool = False
    user: str = "Ada"

    @rx.event
    def log_in(self):
        self.logged_in = True

    @rx.event
    def log_out(self):
        self.logged_in = False


rx.hstack(
    rx.text("Shop", weight="bold"),
    rx.spacer(),
    rx.cond(
        CondLoginState.logged_in,
        rx.hstack(
            rx.avatar(fallback=CondLoginState.user[0], size="2", radius="full"),
            rx.text(CondLoginState.user, size="2"),
            rx.button("Log out", on_click=CondLoginState.log_out, size="1", variant="soft", color_scheme="gray"),
            align="center",
        ),
        rx.button("Log in", on_click=CondLoginState.log_in, size="2"),
    ),
    width="100%",
    max_width="420px",
    align="center",
    padding="10px 14px",
    border=f"1px solid {rx.color('gray', 6)}",
    border_radius="10px",
)

Notas del taller

rx.cond(condición, si es verdadero, si es falso). El if de Python no sirve con valores del State.
El componente del caso falso se puede omitir. Con dos valores, se convierte en un Var para propiedades.
La negación es ~; y·o son & · |. Las comparaciones, siempre entre paréntesis.
elif se consigue anidando rx.cond. Con muchas ramas, rx.match.

← Anterior

Superposiciones · Toast

Renderizado dinámico · Match

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