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

Stack

rx.stackrx.hstackrx.vstack

Documentación oficial

Pedido del taller

Apila de arriba abajo, con la misma separación, las opciones de una pantalla de ajustes, y dentro de cada opción pon el icono y el texto uno al lado del otro.

Stack es una caja que apila a sus hijos en una dirección con una separación constante entre ellos. rx.vstack apila en vertical, rx.hstack en horizontal y rx.stack en la dirección que tú elijas. Los tres están construidos sobre rx.flex y usan sus mismas propiedades. La diferencia está en los valores por defecto: la separación (spacing="3") y la alineación (align="start") ya vienen fijadas.

Card 1

Card 2

Card 3

rx.vstack(
    rx.card("Card 1"),
    rx.card("Card 2"),
    rx.card("Card 3"),
)

Prueba las propiedades

Cambia la dirección, la separación y la alineación de rx.stack. Solo la caja central es más alta, así que en horizontal se ve la diferencia de align.

Prueba las propiedades

Example

direction

spacing

align

justify

rx.stack(
    rx.box("Example", background_color="orange", border_radius="3px", padding="4px", width="20%"),
    rx.box("Example", background_color="lightblue", border_radius="3px", padding="4px", width="30%", height="3rem"),
    rx.box("Example", background_color="lightgreen", border_radius="3px", padding="4px", width="40%"),
    direction="column",
    spacing="3",
    align="start",
    justify="start",
    width="100%",
    min_height="12rem",
    padding="8px",
    border="1px dashed var(--gray-7)",
)

Con direction en column equivale a vstack; en row, a hstack. Con spacing a 0 los elementos se apilan pegados.

Propiedad	Valores	Por defecto	Uso
`direction`	`"row"` `"column"` `"row-reverse"` `"column-reverse"`	`vstack` `"column"`, `hstack` `"row"`, `stack` ninguno (horizontal)	Dirección de apilado
`spacing`	`"0"` ~ `"9"`	`"3"`	Separación entre hijos
`align`	`"start"` `"center"` `"end"` `"baseline"` `"stretch"`	`"start"`	Alineación en el eje transversal. Con stretch, los hijos ocupan todo el eje transversal
`justify`	`"start"` `"center"` `"end"` `"between"`	`"start"`	Alineación en la dirección de apilado (eje principal)
`wrap`	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Si pasa a la línea siguiente cuando no cabe
`as_child`	`True` / `False`	`False`	Dibuja el elemento hijo y fusiona las propiedades

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

rx.stack: elegir la dirección

rx.stack no tiene dirección por defecto, así que si no la indicas apila en horizontal. La documentación oficial fija la dirección con la propiedad CSS flex_direction, pero la versión 0.10 instalada también tiene la propiedad direction de Flex, así que valen las dos. Abajo, a la izquierda flex_direction="row" y a la derecha direction="column".

Example

rx.flex(
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        flex_direction="row",
        width="100%",
    ),
    rx.stack(
        rx.box("Example", bg="orange", border_radius="3px", width="20%"),
        rx.box("Example", bg="lightblue", border_radius="3px", width="30%"),
        rx.box("Example", bg="lightgreen", border_radius="3px", width="50%"),
        direction="column",
        width="100%",
    ),
    width="100%",
)

hstack

Apila en horizontal. Si das a cada hijo un ancho distinto, ocupan el espacio en esa proporción.

Example

rx.hstack(
    rx.box("Example", bg="red", border_radius="3px", width="10%"),
    rx.box("Example", bg="orange", border_radius="3px", width="10%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="10%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="60%"),
    width="100%",
)

vstack

Apila en vertical. Se usa en casi cualquier sitio donde la pantalla se organiza de arriba abajo.

Example

rx.vstack(
    rx.box("Example", bg="red", border_radius="3px", width="20%"),
    rx.box("Example", bg="orange", border_radius="3px", width="40%"),
    rx.box("Example", bg="yellow", border_radius="3px", width="60%"),
    rx.box("Example", bg="lightblue", border_radius="3px", width="80%"),
    rx.box("Example", bg="lightgreen", border_radius="3px", width="100%"),
    width="100%",
)

Cuando los hijos no ocupan todo el ancho

El valor por defecto de align en Stack es "start", así que un botón dentro de un vstack solo ocupa el ancho de su texto. Para que los hijos llenen todo el ancho, usa align="stretch" o da width="100%" a los hijos. A la izquierda, el valor por defecto; a la derecha, stretch.

rx.flex(
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        width="140px",
    ),
    rx.vstack(
        rx.button("Save"),
        rx.button("Cancel", variant="soft"),
        align="stretch",
        width="140px",
    ),
    spacing="6",
)

Como en una pantalla real

Dos cajas con título y texto, una al lado de la otra con un hstack. En lugar de spacing, también puedes indicar con el gap de CSS la longitud exacta que quieras, como "2em".

Saving Money

Set aside a small part of every pay day.

Spending Money

Balance today's wishes and tomorrow's needs.

rx.hstack(
    rx.box(
        rx.heading("Saving Money", as_="h2", size="4"),
        rx.text("Set aside a small part of every pay day.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    rx.box(
        rx.heading("Spending Money", as_="h2", size="4"),
        rx.text("Balance today's wishes and tomorrow's needs.", margin_top="0.5em"),
        padding="1em",
        border="1px solid var(--gray-6)",
    ),
    gap="2em",
)

Completar el pedido

Por fuera, un vstack apila las opciones; dentro de cada una, un hstack pone en fila el icono, el texto y el interruptor. El rx.spacer() del medio empuja el interruptor al extremo derecho.

Notifications

Dark mode

Weekly email

rx.vstack(
    rx.hstack(rx.icon("bell"), rx.text("Notifications"), rx.spacer(), rx.switch(default_checked=True), align="center", width="100%"),
    rx.hstack(rx.icon("moon"), rx.text("Dark mode"), rx.spacer(), rx.switch(), align="center", width="100%"),
    rx.hstack(rx.icon("mail"), rx.text("Weekly email"), rx.spacer(), rx.switch(), align="center", width="100%"),
    spacing="4",
    width="100%",
    max_width="320px",
)

Notas del taller

vstack en vertical, hstack en horizontal; stack fija la dirección con direction.
Los tres se basan en Flex, así que usan direction, align, justify, wrap y spacing tal cual.
Cambian los valores por defecto: spacing "3", align "start".
Para que los hijos llenen el eje transversal: align="stretch" o width="100%" en los hijos.
Un hstack interior + rx.spacer() para pegar algo a un extremo es una estructura habitual.

← Anterior

Diseño · Flex

Diseño · Grid

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