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

Visualización de datos

Badge

rx.badge

Documentación oficial

Pedido del taller

Junto a cada línea de la lista de pedidos, añade su estado («pagado», «pendiente», «fallido») para que se vea de un vistazo.

rx.badge es una pequeña etiqueta que indica de forma breve el estado o la categoría de un elemento. Sirve para destacar una o dos palabras, como "New", "Paid" o "Beta". El texto que pases como primer argumento aparece tal cual dentro de la etiqueta.

New

rx.badge("New")

Prueba las propiedades

El aspecto del badge lo deciden cinco propiedades. Cambia un valor y verás cambiar a la vez el badge y el código.

Prueba las propiedades

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variant elige el tipo de relleno, size el tamaño y color_scheme el color. high_contrast aumenta el contraste entre el texto y el fondo.

Propiedad	Valores	Por defecto	Uso
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	Tipo de relleno; solid es el más fuerte
`size`	`"1"` `"2"` `"3"`	`"1"`	Tamaño y relleno interior
`color_scheme`	Nombre de color Radix	Color del tema	Color que transmite el significado del estado
`high_contrast`	`True` / `False`	`False`	Más contraste entre texto y fondo
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Valor del tema	Redondeo de las esquinas

Tamaño

size fija a la vez el tamaño y el relleno interior. El texto de la documentación oficial solo menciona "1" y "2", pero Reflex 0.10 acepta hasta "3".

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

Cuatro variants

solid rellena todo con color, soft usa un fondo suave, surface añade un borde a ese fondo suave y outline dibuja solo el borde. Si no indicas nada, se usa soft.

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

Significado con color

color_scheme fija el color de este badge con independencia del color del tema del sitio. Si das significado a los colores (green para éxito, amber para aviso, red para error), el estado se entiende antes de leer el texto.

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

Contraste y esquinas

high_contrast=True oscurece el texto para aumentar el contraste. La fila de arriba es la normal; la de abajo, la de alto contraste.

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radius ignora el valor de esquinas del tema y fija el redondeo solo para este badge. Para la forma de píldora, usa "full".

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

Con iconos

Dentro de un badge cabe no solo texto, también otros componentes. Puedes alinear icono y texto con rx.flex, como hace la documentación oficial, o simplemente pasarlos uno detrás de otro como hijos.

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

Un badge que cambia con el State

Tanto el texto como el color pueden tomar valores del State. El color se elige para cada estado con rx.match.

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

Completar el pedido

Ponemos un badge de estado junto a cada número de pedido. Lo ya cerrado (el reembolso) se atenúa con outline y gris.

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

Notas del taller

Se crea con rx.badge("texto") y sirve para indicar estados o categorías breves.
variant: solid · soft (por defecto) · surface · outline.
size va de "1" a "3" (el texto de la documentación solo cita 1 y 2); radius fija las esquinas por separado.
Da significado con color_scheme y, si depende de un valor del State, elígelo con rx.match.
Puedes meter rx.icon o rx.flex como hijos para mostrar icono y texto juntos.

← Anterior

Formularios · Upload

Visualización de datos · Avatar

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