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

Diseño

Fragment

rx.fragment

Documentación oficial

Pedido del taller

Tengo que meter tarjetas directamente en las celdas de un Grid, pero según una condición quiero añadir o quitar dos tarjetas a la vez.

rx.fragment agrupa varios componentes en uno sin dejar ningún elemento envolvente en la pantalla. Equivale al Fragment de React. Se usa cuando quieres poner varios componentes donde la sintaxis solo admite uno (una rama de rx.cond, lo que devuelve rx.foreach, el valor de retorno de una función). Como no hay un div envolvente, la estructura del Flex o Grid exterior no se rompe.

Component1

Component2

rx.fragment(rx.text("Component1"), rx.text("Component2"))

Muévelo con State

Fragment no tiene propiedades visibles, así que en lugar de un banco de pruebas lo moveremos con State. En una rama de rx.cond solo cabe un componente, así que agrupamos dos tarjetas en un Fragment para añadirlas y quitarlas juntas. Las dos tarjetas entran directamente en las celdas del Grid.

Show cards 4 and 5

Card 1

Card 2

Card 3

class FragmentExtraState(rx.State):
    show_extra: bool = False

    @rx.event
    def set_show_extra(self, value: bool):
        self.show_extra = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=FragmentExtraState.show_extra, on_change=FragmentExtraState.set_show_extra),
        rx.text("Show cards 4 and 5"),
        align="center",
    ),
    rx.grid(
        rx.card("Card 1"),
        rx.card("Card 2"),
        rx.card("Card 3"),
        rx.cond(
            FragmentExtraState.show_extra,
            rx.fragment(rx.card("Card 4"), rx.card("Card 5")),
        ),
        columns="3",
        spacing="2",
        width="100%",
    ),
    width="100%",
)

Propiedad	Valores	Por defecto	Uso
`*children`	Varios componentes	Ninguno	Los hijos que se agrupan. Se dibujan tal cual, sin elemento envolvente

Como Fragment no deja ningún elemento en pantalla, no hay dónde aplicar estilos (width, padding …) ni eventos como on_click. Si los pasas, no tienen efecto y React muestra una advertencia. Si necesitas estilos, envuélvelo en un rx.box.

Comparado con envolver en un Box

Los dos Grid agrupan las tarjetas 2 y 3. A la izquierda es un Fragment, así que 2 y 3 ocupan una celda cada una. A la derecha es un Box, así que 2 y 3 se apilan dentro de una sola celda, y la posición de 4 también cambia.

rx.flex(
    rx.grid(
        rx.card("1"),
        rx.fragment(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("1"),
        rx.box(rx.card("2"), rx.card("3")),
        rx.card("4"),
        columns="2",
        spacing="2",
        width="45%",
    ),
    justify="between",
    align="start",
    width="100%",
)

Devolver varios componentes en foreach y en funciones

La función de rx.foreach debe devolver un componente por elemento. Si quieres devolver dos celdas, como el nombre y el precio, agrúpalas en un Fragment. Así, el Grid exterior con columns="2" coloca el nombre en la celda izquierda y el precio en la derecha, alineados como una tabla.

Coffee

Tea

Cake

class FragmentMenuState(rx.State):
    items: list[list[str]] = [["Coffee", "$3"], ["Tea", "$2"], ["Cake", "$5"]]


def fragment_menu_row(row):
    return rx.fragment(
        rx.text(row[0]),
        rx.text(row[1], text_align="right", weight="bold"),
    )


rx.grid(
    rx.foreach(FragmentMenuState.items, fragment_menu_row),
    columns="2",
    spacing_y="2",
    width="200px",
)

Completar el pedido

A los socios se les muestran dos tarjetas más; si no, una tarjeta informativa que ocupa dos celdas. Como la primera rama de rx.cond es un Fragment, las dos tarjetas entran directamente en las celdas del Grid.

Mug

Plate

Gold mug

Gold plate

class FragmentOrderState(rx.State):
    members_only: bool = True

    @rx.event
    def toggle_members(self):
        self.members_only = not self.members_only


rx.vstack(
    rx.button(
        rx.cond(FragmentOrderState.members_only, "Show public view", "Show member view"),
        on_click=FragmentOrderState.toggle_members,
        variant="soft",
    ),
    rx.grid(
        rx.card("Mug"),
        rx.card("Plate"),
        rx.cond(
            FragmentOrderState.members_only,
            rx.fragment(rx.card("Gold mug"), rx.card("Gold plate")),
            rx.card("Members get two more items", grid_column="span 2"),
        ),
        columns="2",
        spacing="2",
        width="100%",
        max_width="320px",
    ),
)

Notas del taller

rx.fragment(a, b) agrupa varios componentes en uno sin elemento envolvente.
Sirve para poner varios componentes en una rama de rx.cond, en lo que devuelve rx.foreach o en el retorno de una función.
Como no hay div envolvente, se conserva la colocación en celdas del Flex o Grid exterior.
Al no dejar ningún elemento, no admite estilos ni eventos. Si los necesitas, rx.box.

← Anterior

Diseño · Aspect Ratio

Tipografía · Text

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