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

Otras herramientas

Theme

rx.themerx.theme_panel

Documentación oficial

Pedido del taller

Deja el sitio tal como está y cambia solo la caja del banner de eventos a color verde azulado y esquinas en forma de píldora.

rx.theme es el proveedor de tema que fija el color, las esquinas y la escala de tamaño de los componentes Radix. Normalmente se aplica una vez a toda la app, y si vuelves a envolver algo dentro de una página, solo esa parte se sobrescribe con otro tema. Todos los ejemplos de esta página son sobrescrituras de este tipo, así que el resto del sitio no cambia.

rx.theme(
    rx.box(
        rx.button("Teal button"),
        padding="12px",
    ),
    accent_color="teal",
)

Prueba las propiedades

Hemos envuelto una tarjeta con rx.theme. Al cambiar el tema, el botón, el badge, el interruptor y la tarjeta cambian todos a la vez.

Prueba las propiedades

Spring sale

Up to 30% off this week.

New

accent_color

gray_color

radius

scaling

panel_background

has_background

rx.theme(
    rx.box(
        rx.card(
            rx.flex(
                rx.heading("Spring sale", size="4"),
                rx.text("Up to 30% off this week.", color_scheme="gray"),
                rx.flex(
                    rx.button("Shop now"),
                    rx.button("Later", variant="soft"),
                    rx.badge("New"),
                    rx.switch(default_checked=True),
                    spacing="3",
                    align="center",
                ),
                direction="column",
                spacing="3",
            ),
        ),
        padding="16px",
    ),
    accent_color="teal",
    gray_color="auto",
    radius="medium",
    scaling="100%",
    panel_background="translucent",
    has_background=True,
)

accent_color es el color de acento; gray_color, el matiz de los grises; radius, las esquinas, y scaling, la escala general. Al activar has_background, la zona del tema se pinta con color de fondo.

Propiedad	Valores	Por defecto	Uso
`accent_color`	26 nombres de color Radix	`"indigo"`	Color de acento de botones, enlaces, interruptores, etc.
`gray_color`	`"gray"` `"mauve"` `"slate"` `"sage"` `"olive"` `"sand"` `"auto"`	`"auto"`	Familia de grises. auto es el gris que combina con el acento
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	`"medium"`	Esquinas de todos los componentes
`scaling`	`"90%"` `"95%"` `"100%"` `"105%"` `"110%"`	`"100%"`	Escala de texto, márgenes y componentes
`panel_background`	`"solid"` `"translucent"`	`"translucent"`	Si el fondo de paneles como tarjetas o menús es translúcido
`has_background`	`True` / `False`	`True`	Si se pinta un color de fondo en la zona del tema
`appearance`	`"inherit"` `"light"` `"dark"`	`"inherit"`	Modo claro u oscuro. Solo a nivel de app (ver abajo)
`default_open` (theme_panel)	`True` / `False`	`False`	Empezar con el panel de tema abierto

Aplicar un tema a toda la app

La documentación oficial lo explica con rx.App(theme=rx.theme(...)), pero en Reflex 0.10 ese argumento figura como un "atajo antiguo", y el lugar oficial es RadixThemesPlugin(theme=...) en rxconfig.py. Este sitio también aplica así accent_color="indigo", gray_color="slate" y radius="large". Como cambiaría todo el sitio, se muestra solo como código.

# rxconfig.py (Reflex 0.10): the app-wide theme goes to the Radix Themes plugin
import reflex as rx

config = rx.Config(
    app_name="my_app",
    plugins=[
        rx.plugins.RadixThemesPlugin(
            theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
        ),
    ],
)

# The official docs' way; in 0.10 it remains as a deprecated shortcut
app = rx.App(
    theme=rx.theme(appearance="light", has_background=True, radius="large", accent_color="teal"),
)

Usado en el tema de la app, appearance fija el modo de color por defecto (claro u oscuro). En 0.10, el appearance dado a un rx.theme dentro de una página se descarta al renderizar, así que no sirve para oscurecer solo una parte.

Sobrescribir solo una parte

El tema nuevo solo se aplica a lo que envuelve rx.theme; lo que queda fuera conserva el tema de la app. Las propiedades que no indiques se heredan del tema exterior. Los estilos dados al propio rx.theme, como padding, se ignoran, así que el relleno se pone en un rx.box interior.

App theme

Draft

Override

Draft

rx.flex(
    rx.card(
        rx.flex(rx.text("App theme"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
    ),
    rx.theme(
        rx.card(
            rx.flex(rx.text("Override"), rx.button("Save"), rx.badge("Draft"), spacing="3", align="center"),
        ),
        accent_color="crimson",
        radius="full",
        has_background=False,
    ),
    spacing="4",
    wrap="wrap",
)

Panel de tema

rx.theme_panel() es un editor de tema que aparece arriba a la derecha de la pantalla. Eliges colores y esquinas probando con clics y luego copias esos valores al rx.theme de tu código. Empieza cerrado; con default_open=True, empieza abierto. Es una herramienta que cambia el tema de todo el sitio, así que en esta página se muestra solo como código.

rx.theme_panel()                   # theme editor in the top-right corner (starts closed)
rx.theme_panel(default_open=True)  # starts open

rx.theme(rx.text("..."), theme_panel=True)   # shortcut that puts the panel inside the theme

Completar el pedido

Solo la caja del banner se envuelve con rx.theme para cambiarla a verde azulado, esquinas de píldora y una escala algo mayor. El callout y el botón de dentro siguen el tema sin necesidad de darles color.

Event week: free shipping on every order.

rx.theme(
    rx.box(
        rx.callout("Event week: free shipping on every order.", icon="party-popper"),
        rx.flex(
            rx.button(rx.icon("gift"), "See deals"),
            rx.button("Remind me", variant="outline"),
            spacing="3",
            margin_top="12px",
        ),
        padding="16px",
    ),
    accent_color="teal",
    radius="full",
    scaling="105%",
    has_background=False,
)

Notas del taller

El tema de toda la app va en RadixThemesPlugin(theme=rx.theme(...)) de rxconfig.py. rx.App(theme=) es un atajo antiguo en 0.10.
Un rx.theme dentro de la página solo sobrescribe la parte que envuelve. Los valores no indicados se heredan.
accent_color · gray_color · radius · scaling · panel_background · has_background.
appearance, solo a nivel de app. Los estilos dados a rx.theme se ignoran: ponlos en una caja interior.
Elige con rx.theme_panel() y copia los valores elegidos al código.

← Anterior

Elementos HTML · SVG

Otras herramientas · Skeleton

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