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

Center

rx.center

Documentación oficial

Pedido del taller

Pon un icono y un mensaje justo en el centro de la pantalla de carrito vacío.

rx.center es una caja que coloca a sus hijos en su centro exacto, horizontal y vertical. Está construida sobre rx.flex, así que admite todas las propiedades de Flex, y ya trae de serie el estilo de centrado (align_items y justify_content en center). Se usa cuando hay que centrar algo: avisos de pantalla vacía, insignias con icono o indicadores de carga.

Hello World!

rx.center(
    rx.text("Hello World!"),
    border="4px solid var(--gray-7)",
    border_radius="15px",
    width="50%",
    padding="12px",
)

Prueba las propiedades

El centrado se nota cuando la caja es más grande que su contenido. Aunque cambies el ancho y la altura, las tarjetas siempre se quedan en el centro.

Prueba las propiedades

Card 1

Card 2

Card 3

direction

spacing

width

height

rx.center(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
    direction="row",
    spacing="3",
    width="100%",
    height="12rem",
    border="1px dashed var(--gray-7)",
    border_radius="8px",
)

Con direction en column, las tarjetas se apilan en vertical y quedan centradas. spacing es la separación entre tarjetas.

Propiedad	Valores	Por defecto	Uso
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`"row"`	Dirección en que se colocan varios hijos
`spacing`	`"0"` ~ `"9"`	Ninguno	Separación entre hijos
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Pasar a la línea siguiente cuando no cabe
`width` `height`	Longitud CSS	Se ajusta al contenido	Tamaño de la zona en la que se centra
`as_child`	`True` / `False`	`False`	Dibuja el elemento hijo y fusiona las propiedades

También acepta align y justify de Flex, pero Center ya los tiene centrados, así que casi nunca hace falta darlos.

Lo mismo con rx.flex

Center equivale a una forma corta de rx.flex(..., align="center", justify="center"). Las dos cajas dan exactamente el mismo resultado.

rx.center

rx.flex + align + justify

rx.flex(
    rx.center(rx.text("rx.center"), width="45%", height="6rem", background_color="var(--gray-3)"),
    rx.flex(
        rx.text("rx.flex + align + justify"),
        align="center",
        justify="center",
        width="45%",
        height="6rem",
        background_color="var(--gray-3)",
    ),
    justify="between",
    width="100%",
)

Insignias con icono

Si das el mismo ancho y alto y redondeas las esquinas, obtienes una insignia redonda para un icono o un número. Center se encarga de centrar el contenido.

rx.flex(
    rx.center(rx.icon("check", color="var(--grass-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--grass-3)"),
    rx.center(rx.icon("x", color="var(--red-11)"), width="48px", height="48px", border_radius="9999px", background_color="var(--red-3)"),
    rx.center(rx.text("42", weight="bold"), width="48px", height="48px", border_radius="8px", background_color="var(--accent-3)"),
    spacing="3",
)

Completar el pedido

Con direction="column", el icono, el título, el mensaje y el botón se apilan en vertical y quedan en el centro de un min_height generoso. Para centrarlo en toda la página, usa min_height="100vh".

Your cart is empty

Add something you like.

rx.center(
    rx.icon("shopping-cart", size=40, color="var(--gray-9)"),
    rx.heading("Your cart is empty", size="4"),
    rx.text("Add something you like.", size="2", color="var(--gray-11)"),
    rx.button("Go shopping", variant="soft"),
    direction="column",
    spacing="3",
    width="100%",
    min_height="16rem",
    border="1px dashed var(--gray-6)",
    border_radius="8px",
)

Notas del taller

rx.center coloca a sus hijos en el centro exacto, horizontal y vertical.
Equivale a rx.flex(align="center", justify="center"). Usa las propiedades de Flex tal cual.
Para que el centrado se vea, la caja debe ser mayor que el contenido: width, height, min_height.
Varios hijos se apilan y separan con direction y spacing.

← Anterior

Diseño · Section

Diseño · Spacer

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