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

Container

rx.container

Documentación oficial

Pedido del taller

Limita el texto principal a un ancho cómodo de leer, para que en un monitor ancho no se extienda sin fin hacia los lados.

rx.container limita el ancho máximo de su contenido y deja como margen el espacio sobrante a ambos lados, de modo que el contenido queda centrado. Si la pantalla es más estrecha que ese ancho máximo, el contenido se estrecha con ella, así que encaja bien en diseños responsivos. Lo habitual es envolver todo el cuerpo de una página.

This content is at most 448px wide.

rx.box(
    rx.container(
        rx.card("This content is at most 448px wide.", width="100%"),
        size="1",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Prueba las propiedades

El fondo gris es la zona exterior y la tarjeta está dentro del Container. Esta vista previa es estrecha, así que con size 3 y 4 parece que la tarjeta ocupa todo el espacio.

Prueba las propiedades

Page content

size

padding

rx.box(
    rx.container(
        rx.card("Page content", width="100%"),
        size="1",
        padding="16px",
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Cuanto mayor es size, más ancho máximo tiene el interior. padding es el relleno interior que Reflex añade por defecto (16px).

Propiedad	Valores	Por defecto	Uso
`size`	`"1"`(448px) `"2"`(688px) `"3"`(880px) `"4"`(1136px)	`"3"`	Ancho máximo del contenido
`padding`	Longitud CSS	`"16px"`	Relleno interior. Lo añade por defecto el `create` de Reflex
`stack_children_full_width`	`True` / `False`	`False`	Da ancho 100% a los vstack y hstack interiores y a hijos como sus campos de entrada

size admite valores distintos según el ancho de pantalla con rx.breakpoints(...). padding y stack_children_full_width no son propiedades de Radix, sino argumentos que añade el rx.container de la versión 0.10 instalada.

Los cuatro tamaños

Este es el ejemplo de la documentación oficial. Cada Container crece dentro del ancho exterior solo hasta su propio ancho máximo y queda centrado.

size 1: max 448px

size 2: max 688px

size 3: max 880px

size 4: max 1136px

rx.box(
    rx.container(rx.card("size 1: max 448px", width="100%"), size="1"),
    rx.container(rx.card("size 2: max 688px", width="100%"), size="2"),
    rx.container(rx.card("size 3: max 880px", width="100%"), size="3"),
    rx.container(rx.card("size 4: max 1136px", width="100%"), size="4"),
    background_color="var(--gray-3)",
    width="100%",
)

Que las pilas interiores ocupen todo el ancho

Por defecto, Stack coloca a sus hijos con align="start", así que los campos de entrada solo ocupan su propio ancho. Con stack_children_full_width=True, las pilas del Container y sus hijos directos div, input, select, textarea y table pasan a tener ancho 100%. Los botones (elementos button) no se ven afectados. A la izquierda, el valor por defecto; a la derecha, activado.

rx.flex(
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        background_color="var(--gray-3)",
    ),
    rx.container(
        rx.vstack(rx.input(placeholder="Name"), rx.text_area(placeholder="Message")),
        size="1",
        stack_children_full_width=True,
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

Tamaño distinto según el ancho de pantalla

Si quieres un ancho estrecho en el móvil y uno mayor en pantallas anchas, pasa rx.breakpoints a size.

1 on phones, 2 from md, 3 from lg

rx.box(
    rx.container(
        rx.card("1 on phones, 2 from md, 3 from lg", width="100%"),
        size=rx.breakpoints(initial="1", md="2", lg="3"),
    ),
    background_color="var(--gray-3)",
    width="100%",
)

Completar el pedido

El artículo queda limitado con size="2" (688px como máximo). Incluso en un monitor ancho, las líneas no se alargan demasiado y el texto se lee con comodidad.

Notes from the workshop

Posted on Monday

A long line of text is hard to read. Keeping the column narrow helps the eye find the next line.

The container keeps this column narrow on wide screens.

rx.box(
    rx.container(
        rx.vstack(
            rx.heading("Notes from the workshop", size="6"),
            rx.text("Posted on Monday", size="2", color="var(--gray-11)"),
            rx.text(
                "A long line of text is hard to read. "
                "Keeping the column narrow helps the eye find the next line.",
            ),
            rx.text("The container keeps this column narrow on wide screens."),
            spacing="3",
        ),
        size="2",
        padding_y="24px",
    ),
    background_color="var(--gray-2)",
    width="100%",
)

Notas del taller

rx.container limita el ancho máximo del contenido y lo centra. Sirve para envolver el cuerpo de la página.
size "1"~"4" = 448 · 688 · 880 · 1136px. Por defecto, "3".
Reflex añade padding="16px" por defecto. Cámbialo si hace falta.
Con stack_children_full_width=True, las pilas interiores y los hijos como campos de entrada ocupan el 100% (los botones no).
Se puede cambiar según el ancho de pantalla, como size=rx.breakpoints(initial="1", lg="3").

← Anterior

Diseño · Grid

Diseño · Section

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