Darle estilo: componentes, props y estilos

Hasta ahora has usado con toda naturalidad componentes como rx.button, rx.heading y rx.box. En esta lección repasamos las reglas para crear, combinar y dar estilo a los componentes. Son solo dos.

5-1. Un componente es lo que devuelve una función (1 min)

Un componente es una pieza de la interfaz, como un botón, un texto o una imagen. Reflex incluye muchos componentes integrados, y si escribes una función que devuelve un componente, ya tienes tu propio componente.

def my_button():
    return rx.button("Click Me")

5-2. Regla 1: los argumentos posicionales son hijos (2 min)

Para meter un componente dentro de otro, pásalo como argumento posicional. Abajo, rx.text y my_button() son hijos de rx.box. Los componentes creados en otras funciones también se añaden simplemente llamándolos.

def my_container():
    return rx.box(
        rx.text("This is a page"),
        # Reference components defined in other functions.
        my_button(),
    )

Si no existe el componente que necesitas, puedes usar etiquetas HTML directamente con rx.el. rx.el.div es <div> y rx.el.p es <p>.

def my_div():
    return rx.el.div(
        rx.el.p("Use base html!"),
    )

Y si aun así te falta algo, también puedes envolver componentes de React disponibles en npm.

5-3. Regla 2: los argumentos con nombre son props y estilos (2 min)

El comportamiento y el aspecto de un componente se definen con argumentos con nombre (keyword arguments). Estos se llaman props. Cada componente tiene sus propias props, así que, cuando uses uno por primera vez, consulta en la documentación qué props tiene.

def half_filled_progress():
    return rx.progress(value=50)

Además de las props propias del componente, puedes pasar propiedades CSS directamente como props para darle estilo.

def round_button():
    return rx.button("Click Me", border_radius="15px", font_size="18px")

En resumen, un componente se compone de hijos y props.

Cuando en la lección 1 pusiste una Var tanto de hijo como de prop, como en rx.heading(MyState.count, color=MyState.color), estabas aplicando exactamente estas dos reglas.

Ejercicios

1. Añade color_scheme="green" y size="3" a round_button.
2. Dale al rx.box de my_container las props padding="16px", border="1px solid #ccc" y border_radius="12px" para que parezca una tarjeta.
3. ¿Qué pasa si cambias el value de rx.progress por el CounterState.count de la lección 1? Haz que la barra se llene un poco más con cada clic del botón.

Lista de comprobación de esta lección

• Sé explicar en qué se convierten los argumentos posicionales y los argumentos con nombre.
• Sé escribir propiedades CSS como props en snake_case.
• Sé usar rx.el cuando no existe el componente que necesito.