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

Spacer

rx.spacer

Documentación oficial

Pedido del taller

En la cabecera, pon el logotipo a la izquierda y el botón de iniciar sesión pegado al extremo derecho.

rx.spacer es un hueco vacío que ocupa todo el espacio sobrante dentro de un Flex. Si lo intercalas entre los hijos, empuja a los que tiene a cada lado; sirve para pegar unos elementos a la izquierda y otros al extremo derecho. Si hay varios Spacer, se reparten el espacio sobrante a partes iguales.

Example

rx.flex(
    rx.center(rx.text("Example"), bg="lightblue", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="lightgreen", padding="4px 8px"),
    rx.spacer(),
    rx.center(rx.text("Example"), bg="salmon", padding="4px 8px"),
    width="100%",
)

Mueve el Spacer de sitio

Spacer no tiene aspecto propio, así que en lugar de un banco de pruebas veremos cómo cambia el resultado según dónde lo intercales. Elige abajo dónde poner el Spacer. Si pones uno en cada extremo, como en start + end, los elementos se juntan en el centro.

class SpacerPlaceState(rx.State):
    place: str = "middle"

    @rx.event
    def set_place(self, value: str):
        self.place = value


rx.vstack(
    rx.select(
        ["none", "start", "middle", "end", "start + end"],
        value=SpacerPlaceState.place,
        on_change=SpacerPlaceState.set_place,
    ),
    rx.flex(
        rx.cond((SpacerPlaceState.place == "start") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        rx.badge("A", size="3"),
        rx.cond(SpacerPlaceState.place == "middle", rx.spacer()),
        rx.badge("B", size="3"),
        rx.cond((SpacerPlaceState.place == "end") | (SpacerPlaceState.place == "start + end"), rx.spacer()),
        spacing="2",
        width="100%",
        padding="8px",
        border="1px dashed var(--gray-7)",
    ),
    width="100%",
)

Propiedad	Valores	Por defecto	Uso
(estilo) `flex`	`1`	Lo añade Reflex	Ocupa el espacio sobrante; si hay varios, lo reparten a partes iguales
(estilo) `align_self` `justify_self`	`"stretch"`	Lo añade Reflex	También se estira en el eje transversal
`direction` `align` `justify` `wrap` `spacing` `as_child`	Igual que Flex	Ninguno	Las acepta por basarse en Flex, pero al ser un hueco vacío casi nunca se usan

Spacer solo ocupa espacio si su padre es de la familia Flex (rx.flex, rx.hstack, rx.vstack, rx.stack). Dentro de un rx.box no hace nada.

Dentro de una pila y en vertical

stack, vstack y hstack están construidos con Flex, así que admiten Spacer tal cual. En vertical (vstack) reparte la altura. En el menú de la izquierda, gracias al Spacer, «Log out» baja hasta el final. En vertical, el padre necesita una altura para que haya espacio sobrante.

Home

Orders

Log out

Left

Right

rx.flex(
    rx.vstack(
        rx.text("Menu", weight="bold"),
        rx.text("Home"),
        rx.text("Orders"),
        rx.spacer(),
        rx.text("Log out", color="var(--red-11)"),
        height="14rem",
        padding="12px",
        background_color="var(--gray-3)",
        width="140px",
    ),
    rx.hstack(
        rx.badge("Left"),
        rx.spacer(),
        rx.badge("Right"),
        width="100%",
        padding="12px",
        background_color="var(--gray-3)",
    ),
    spacing="4",
    width="100%",
)

Comparado con justify="between"

Separar los hijos hacia los extremos también se puede hacer con justify="between". Pero between reparte el espacio por igual entre todos los hijos, mientras que Spacer solo separa donde lo intercalas. Arriba, solo A queda a la izquierda y B y C van pegados a la derecha; abajo, between separa los tres por igual.

ABC

rx.vstack(
    rx.flex(rx.badge("A"), rx.spacer(), rx.badge("B"), rx.badge("C"), spacing="2", width="100%"),
    rx.flex(rx.badge("A"), rx.badge("B"), rx.badge("C"), justify="between", width="100%"),
    width="100%",
    spacing="4",
)

Completar el pedido

Con un solo Spacer entre el grupo del logotipo y los dos botones, el logotipo queda a la izquierda y los botones pegados al extremo derecho.

Workshop

rx.hstack(
    rx.hstack(rx.icon("hammer"), rx.text("Workshop", weight="bold"), align="center"),
    rx.spacer(),
    rx.button("Log in", variant="soft"),
    rx.button("Sign up"),
    align="center",
    width="100%",
    padding="12px 16px",
    border_bottom="1px solid var(--gray-6)",
)

Notas del taller

rx.spacer() es un hueco vacío que ocupa el espacio sobrante dentro de un Flex.
Empuja a los elementos que tiene a cada lado. Si hay varios, reparten el espacio a partes iguales.
Solo funciona dentro de flex, hstack, vstack y stack. En vstack, el padre necesita altura.
Para separar todos los hijos por igual, justify="between"; para separar en un solo punto, spacer.

← Anterior

Diseño · Center

Diseño · Separator

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