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

Grid

rx.grid

Documentación oficial

Pedido del taller

Coloca varias fotos en cuadrícula, de tres en tres, como un tablero.

rx.grid es una caja que coloca a sus hijos en celdas de filas y columnas, como un tablero. Si Flex los alinea a lo largo de una línea, Grid ajusta filas y columnas a la vez. Fija el número de celdas con columns o rows y los hijos las irán llenando en orden.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    columns="3",
    spacing="4",
    width="100%",
)

Prueba las propiedades

Cambia el número de columnas, la separación horizontal y vertical y la alineación dentro de las celdas. Solo Card 2 es más alta, así que la diferencia de align se ve en las demás tarjetas de la misma fila.

Prueba las propiedades

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

columns

spacing_x

spacing_y

align

rx.grid(
    rx.card("Card 1"),
    rx.card("Card 2", height="5rem"),
    rx.card("Card 3"),
    rx.card("Card 4"),
    rx.card("Card 5"),
    rx.card("Card 6"),
    rx.card("Card 7"),
    columns="3",
    spacing_x="3",
    spacing_y="3",
    align="stretch",
    width="100%",
)

columns es el número de columnas; spacing_x, la separación entre columnas, y spacing_y, entre filas. align fija la posición vertical dentro de la celda.

Propiedad	Valores	Por defecto	Uso
`columns`	`"1"` ~ `"9"` o cadena CSS (`"120px 1fr"`)	Ninguno	Número de columnas o plantilla de anchos
`rows`	`"1"` ~ `"9"` o cadena CSS	Ninguno	Número de filas o plantilla de alturas
`flow`	`"row"` `"column"` `"dense"` `"row-dense"` `"column-dense"`	`"row"`	Orden en que los hijos llenan las celdas
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"stretch"`	Alineación vertical dentro de la celda
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Alineación horizontal del conjunto de celdas. Solo se nota si sobra espacio
`spacing`	`"0"` ~ `"9"`	Ninguno	Separación entre filas y columnas
`spacing_x` `spacing_y`	`"0"` ~ `"9"`	Ninguno	Separación entre columnas y entre filas, por separado
`as_child`	`True` / `False`	`False`	Dibuja el elemento hijo y fusiona las propiedades

Todas las propiedades admiten valores distintos según el ancho de pantalla con rx.breakpoints(...).

Definir por filas

Con rows="3" y flow="column" a la vez, los hijos llenan tres celdas de arriba abajo y luego pasan a la columna siguiente. Aquí el ancho de las columnas se ajusta al contenido, así que sobra espacio, y justify="between" separa las columnas hasta los extremos.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

rx.grid(
    rx.foreach(
        rx.Var.range(12),
        lambda i: rx.card(f"Card {i + 1}", height="10vh"),
    ),
    rows="3",
    flow="column",
    justify="between",
    spacing="4",
    width="100%",
)

Fijar el ancho de las celdas y ocupar varias

Si en columns pones un valor de grid-template-columns de CSS en lugar de un número, puedes fijar el ancho de cada columna. "120px 1fr" da 120px a la primera columna y el resto a la segunda. Si a un hijo le das grid_column="span 2" de CSS, ocupa dos columnas; con grid_row="span 2", dos filas.

Sidebar

Content

Wide

Tall

rx.vstack(
    rx.grid(
        rx.card("Sidebar"),
        rx.card("Content"),
        columns="120px 1fr",
        spacing="3",
        width="100%",
    ),
    rx.grid(
        rx.card("Wide", grid_column="span 2"),
        rx.card("1"),
        rx.card("2"),
        rx.card("3"),
        rx.card("Tall", grid_row="span 2"),
        rx.card("4"),
        rx.card("5"),
        columns="3",
        spacing="3",
        width="100%",
    ),
    width="100%",
)

flow="dense": rellenar huecos

Cuando se suceden tarjetas de dos celdas, queda un hueco al final de la fila. El valor por defecto flow="row" (izquierda) respeta el orden y deja el hueco; flow="dense" (derecha) trae una tarjeta pequeña posterior para rellenarlo.

rx.flex(
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="row",
        spacing="2",
        width="45%",
    ),
    rx.grid(
        rx.card("A", grid_column="span 2"),
        rx.card("B", grid_column="span 2"),
        rx.card("C"),
        rx.card("D"),
        columns="3",
        flow="dense",
        spacing="2",
        width="45%",
    ),
    justify="between",
    width="100%",
)

Número de columnas según el ancho de pantalla

Con columns=rx.breakpoints(...) hay 1 columna en pantallas estrechas, 2 a partir de xs (520px) y 3 a partir de md (1024px). Prueba a cambiar el ancho de la ventana del navegador.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

rx.grid(
    rx.foreach(rx.Var.range(6), lambda i: rx.card(f"Card {i + 1}")),
    columns=rx.breakpoints(initial="1", xs="2", md="3"),
    spacing="3",
    width="100%",
)

Completar el pedido

Las seis fotos se colocan con columns="3", y cada imagen llena su celda con width="100%". Como todas las celdas tienen el mismo ancho, las fotos quedan del mismo tamaño.

rx.grid(
    *[
        rx.image(
            src=f"https://picsum.photos/id/{n}/300/300",
            width="100%",
            height="auto",
            border_radius="6px",
        )
        for n in [10, 11, 12, 13, 14, 15]
    ],
    columns="3",
    spacing="2",
    width="100%",
    max_width="420px",
)

Notas del taller

rx.grid ajusta filas y columnas a la vez. El número de celdas se fija con columns o rows.
columns acepta "1"~"9" o una plantilla CSS como "120px 1fr".
La separación se da con spacing (general), spacing_x (entre columnas) y spacing_y (entre filas).
flow fija el orden de llenado; grid_column="span 2" en un hijo hace que ocupe varias celdas.
Cambia el número de columnas según el ancho con columns=rx.breakpoints(initial="1", md="3").

← Anterior

Diseño · Stack

Diseño · Container

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