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

Box

rx.box

Documentación oficial

Pedido del taller

Envuelve un aviso con un fondo suave y esquinas redondeadas para que se distinga del texto principal de un vistazo.

rx.box es la caja más básica. Es un elemento de bloque basado en el div de HTML y sirve para agrupar otros componentes y dar estilo a ese grupo. Box no tiene propiedades propias: su aspecto se construye pasando como argumentos con nombre propiedades CSS como el fondo, el relleno o el borde.

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

Prueba las propiedades

Todo el aspecto de un Box se define con propiedades de estilo CSS. En Python, el - de los nombres CSS se escribe _ (background-color → background_color).

Prueba las propiedades

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

Cambia el fondo, el relleno, el borde, las esquinas y el ancho. Son todas propiedades CSS, así que los valores se escriben igual que en CSS.

Propiedad	Valores	Por defecto	Uso
`width` `height`	Longitud CSS (`"200px"`, `"50%"`)	Se ajusta al contenido	Tamaño de la caja
`padding` `margin`	Longitud CSS; también por lados, como `padding_x` o `margin_top`	`0`	Márgenes interior y exterior
`background_color` `background`	Nombre de color, `var(--tomato-3)`, degradado, `url(…)`	Ninguno	Color o imagen de fondo
`border` `border_radius`	`"1px solid var(--gray-7)"`, `"8px"`	Ninguno	Borde y redondeo de esquinas
`title`	Texto	Ninguno	Ayuda que aparece al pasar el ratón
`hidden` `role` `tab_index`	Atributos HTML	Ninguno	Ocultar, rol de accesibilidad, orden de tabulación
`on_click` `on_mouse_enter` …	Event handler	Ninguno	Eventos básicos que tiene todo componente

Colores: nombres CSS y colores Radix

Hay tres formas de dar color: un nombre de color CSS como "orange", una variable de color Radix como var(--tomato-3) (o su equivalente rx.color("plum", 3)), y var(--accent-2), que sigue el color de acento del tema del sitio. Los colores Radix tienen 12 tonos; cuanto menor el número, más claro y más apto para fondos.

El ejemplo de la documentación oficial pasa radius="full" a la última caja, pero Box no tiene la propiedad radius y no surte efecto. Las esquinas redondeadas se consiguen con border_radius.

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

Fondos: degradados e imágenes

Con la sola propiedad CSS background puedes poner un degradado o una imagen de fondo. linear-gradient cambia de color a lo largo de una línea; radial-gradient, desde un punto hacia fuera. La imagen se indica con url(…), y center/cover la centra y hace que llene toda la caja.

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

Eventos y atributos HTML

Box tiene los eventos básicos que comparten todos los componentes (on_click, on_mouse_enter, on_mouse_leave, etc.). Pasa el ratón por la caja de abajo y haz clic. Si le das title, aparece una ayuda cuando el puntero se detiene un momento encima.

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

Completar el pedido

Un fondo suave y un borde izquierdo intenso anuncian que es un aviso, y el relleno interior evita que el texto quede pegado al borde.

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

Notas del taller

rx.box es una caja de bloque basada en div. Sirve para agrupar y dar estilo.
No tiene propiedades propias: se le pasan propiedades CSS como width, padding, background_color o border_radius con nombres en _.
Color: nombre CSS, var(--tomato-3) o rx.color("tomato", 3), o el acento del tema var(--accent-N).
Con background se ponen degradados (linear, radial) e imágenes url(…).
También admite eventos básicos como on_click u on_mouse_enter y atributos HTML como title o hidden.

← Anterior

Resumen del curso

Diseño · Flex

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