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

Card

rx.card

Documentación oficial

Pedido del taller

En la portada del blog, crea una tarjeta por artículo con su título y su resumen, y que al pulsar la tarjeta se abra ese artículo.

rx.card es una caja que agrupa contenido relacionado en un bloque. Se parece a Box, pero tiene borde, sigue el color y el redondeo de esquinas del tema, y con size fija el relleno interior según la escala de Radix ("1"~"5"). Por eso, con menos estilos que un Box, consigues un aspecto que encaja con el tema.

Basic Card

rx.card("Basic Card")

Prueba las propiedades

Al aumentar size crecen a la vez el relleno interior y el redondeo de las esquinas. Con variant cambias el estilo del borde y del fondo.

Prueba las propiedades

Post title

A short summary of the post.

title

size

variant

width

rx.card(
    rx.heading("Post title", size="3"),
    rx.text("A short summary of the post.", size="2"),
    size="2",
    variant="surface",
    width="280px",
)

surface tiene un borde sutil; classic, relieve con sombra; ghost quita el borde y deja solo el relleno.

Propiedad	Valores	Por defecto	Uso
`size`	`"1"` ~ `"5"`	`"1"`	Relleno interior y redondeo de esquinas
`variant`	`"surface"` `"classic"` `"ghost"`	`"surface"`	Estilo del borde y del fondo
`as_child`	`True` / `False`	`False`	En lugar de la tarjeta, dibuja el elemento hijo (enlace, botón) con forma de tarjeta

size admite valores distintos según el ancho de pantalla con rx.breakpoints(...). Los demás tamaños y márgenes se dan con propiedades CSS, como en Box.

Los cinco tamaños

Este es el ejemplo de la documentación oficial. Con el mismo texto, cuanto mayor es size, más holgada queda la tarjeta.

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)

Las tres variantes

La documentación oficial no trae un ejemplo en el texto, pero variant aparece en la tabla de propiedades. Están surface (por defecto), classic con relieve y ghost sin borde. ghost sirve cuando solo quieres aprovechar las reglas de relleno de la tarjeta.

surface

classic

ghost

rx.flex(
    rx.card("surface", variant="surface"),
    rx.card("classic", variant="classic"),
    rx.card("ghost", variant="ghost"),
    spacing="4",
    wrap="wrap",
)

Dibujar con otro elemento: as_child

Con as_child=True no se dibuja la tarjeta en sí, sino que su hijo directo toma la forma de tarjeta. Si el hijo es un enlace, toda la tarjeta se convierte en un enlace pulsable. Es habitual con enlaces y botones. Al pulsar la tarjeta de abajo, se abre la documentación de Reflex en una pestaña nueva.

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
            rx.box(
                rx.heading("Quick Start", as_="h2", size="3"),
                rx.text("Get started with Reflex in 5 minutes."),
            ),
            spacing="2",
        ),
        href="https://reflex.dev/docs/getting-started/introduction/",
        is_external=True,
    ),
    as_child=True,
)

Hasta el borde con Inset

Para que una imagen dentro de la tarjeta llegue hasta el borde, envuélvela con rx.inset. La saca hacia fuera tanto como mide el relleno interior y la pega al borde. Su uso se explica con detalle en la página de Inset.

Fresh strawberries, picked this morning.

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.text("Fresh strawberries, picked this morning."),
    width="260px",
)

Completar el pedido

Una tarjeta por artículo, y con as_child=True toda la tarjeta es un enlace. La imagen superior llega hasta el borde gracias a rx.inset. Al enlace se le quita el subrayado con underline="none".

Glazing basics

How to mix your first glaze.

Kiln care

Keep your kiln clean and safe.

rx.flex(
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Glazing basics", size="3"),
                rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Kiln care", size="3"),
                rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    spacing="4",
    wrap="wrap",
)

Notas del taller

rx.card es una caja de agrupación con borde y el aspecto del tema.
size "1"~"5" fija el relleno y el redondeo; variant surface · classic · ghost, el estilo.
Con as_child=True, el hijo (enlace, botón) toma la forma de tarjeta y toda la tarjeta se puede pulsar.
Para que una imagen llegue hasta el borde, envuélvela con rx.inset.

← Anterior

Diseño · Separator

Diseño · Inset

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