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

Inset

rx.inset

Documentación oficial

Pedido del taller

En la parte superior de la tarjeta de producto, pon una foto que llegue hasta los bordes de la tarjeta.

rx.inset da un margen exterior negativo a su contenido para que rebase el relleno interior de la caja que lo envuelve y llegue hasta el borde. Dentro de una Card, la imagen ocupa la tarjeta de borde a borde. Se usa cuando el contenido debe pegarse al borde, como una foto en la parte superior de una tarjeta o un mapa en la inferior.

A river between the hills, seen from above.

rx.card(
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="top",
        pb="current",
    ),
    rx.text("A river between the hills, seen from above."),
    width="280px",
)

Prueba las propiedades

Pon una sola imagen dentro de la tarjeta y cambia side. side elige el borde al que se pega el contenido. Con top se extiende hacia arriba y a los lados; con left, hacia la izquierda, arriba y abajo, y solo en el lado opuesto (abajo, derecha) queda el relleno de la tarjeta. x extiende solo a izquierda y derecha, e y solo arriba y abajo. Cuanto mayor es el size de la tarjeta, mayor es el relleno interior y más se nota la diferencia.

side es el lado que se extiende hasta el borde, y clip el límite por el que se recorta. En una tarjeta classic, al cambiar clip cambia si el contenido tapa el borde.

Propiedad	Valores	Por defecto	Uso
`side`	`"top"` `"bottom"` `"left"` `"right"` `"x"` `"y"`	Los cuatro lados	Borde al que se pega el contenido. top: arriba y los lados; x: solo izquierda y derecha; y: solo arriba y abajo
`clip`	`"border-box"` `"padding-box"`	`"border-box"`	Si llena hasta la línea exterior del borde o solo hasta el interior del borde
`p` `px` `py` `pt` `pr` `pb` `pl`	`"current"` `"0"`	Ninguno	Relleno interior del Inset. current lo iguala al relleno interior del padre

Todas las propiedades admiten valores distintos según el ancho de pantalla con rx.breakpoints(...). Radix Themes también acepta side="all", pero la versión 0.10 instalada da un error si pasas "all". Para extender los cuatro lados, simplemente omite side.

Hacia abajo: side="bottom"

side="bottom" extiende hacia abajo y a los lados. Cuando pegas el contenido a un borde, conviene poner en "current" el relleno del lado opuesto. Así, el lado que no llega al borde mantiene la separación del relleno original de la tarjeta. Abajo, la imagen va después del texto y se extiende hacia abajo, con pt="current" en la parte superior.

The inset below uses a bottom side.

rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="bottom",
        pt="current",
    ),
    width="280px",
)

Hacia la izquierda o la derecha

side="right" o "left" se usan para poner el contenido y la imagen uno al lado del otro. Para ello, el interior de la tarjeta debe organizarse con un Flex con direction="row". En el lado de la imagen, pon en "current" el relleno del lado opuesto (pl o pr).

This inset uses a right side.

This inset uses a left side.

rx.flex(
    rx.card(
        rx.flex(
            rx.text("This inset uses a right side."),
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="right",
                pl="current",
            ),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    rx.card(
        rx.flex(
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="left",
                pr="current",
            ),
            rx.text("This inset uses a left side."),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    spacing="4",
    wrap="wrap",
)

Para qué sirve el relleno current

Si pones texto justo debajo de un Inset extendido hacia arriba, por defecto el texto queda pegado a la imagen. Con pb="current" aparece entre ambos un hueco igual al relleno interior de la tarjeta. Los valores posibles son dos: "current" y "0".

No pb: text touches the box.

pb=current: same gap as the card padding.

rx.flex(
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
        rx.text("No pb: text touches the box."),
        width="200px",
    ),
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
        rx.text("pb=current: same gap as the card padding."),
        width="200px",
    ),
    spacing="4",
    wrap="wrap",
)

Completar el pedido

La foto se extiende hasta el borde superior y pb="current" la separa lo justo del nombre del producto. El resto del contenido se queda tal cual dentro del relleno de la tarjeta.

Blue mug

$18

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.heading("Blue mug", size="3"),
    rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
    rx.button("Add to cart", width="100%"),
    width="240px",
)

Notas del taller

rx.inset extiende el contenido hasta el borde del padre (normalmente una Card) con márgenes negativos.
side es el borde al que se pega: top (arriba + lados) · bottom · left · right · x (izquierda y derecha) · y (arriba y abajo). Sin side, los cuatro lados (en 0.10, "all" da error).
Al extender un solo lado, pon "current" en el relleno opuesto (pb · pt · pl · pr) para conservar el relleno de la tarjeta.
Con left o right, el interior de la tarjeta debe ser un Flex con direction="row".
clip: border-box (hasta el borde) o padding-box (dentro del borde).

← Anterior

Diseño · Card

Diseño · Aspect Ratio

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