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

Tipografía

Code

rx.code

Documentación oficial

Pedido del taller

En las frases de las instrucciones de instalación, distingue los comandos y los nombres de archivo con letra monoespaciada.

rx.code muestra fragmentos cortos de código, comandos o nombres de archivo dentro de una frase, con letra monoespaciada y un fondo suave. Se convierte en una etiqueta HTML <code>. Si necesitas código de varias líneas con resaltado de sintaxis, usa rx.code_block.

console.log()

rx.code("console.log()")

Prueba las propiedades

Con variant cambias el fondo y el borde; con size y weight, el texto; con color_scheme, el color.

Prueba las propiedades

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost no tiene fondo: solo cambian la fuente y el color. high_contrast oscurece el texto.

Propiedad	Valores	Por defecto	Uso
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	Forma del fondo y del borde
`size`	`"1"` ~ `"9"`	heredado	Tamaño de letra
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	heredado	Grosor
`color_scheme`	nombre de color Radix	color del tema	Color
`high_contrast`	`True` / `False`	`False`	Oscurece el texto

El tipo de variant en Reflex 0.10 también incluye "classic" y "surface", pero Radix solo define el aspecto de Code para los cuatro de arriba. En cuanto a eventos, solo tiene los básicos.

Las cuatro variants y el contraste

La columna izquierda es la normal; la derecha, con high_contrast=True. Dentro de un texto, soft es la opción más discreta; si tiene que destacar, solid; si no quieres fondo, ghost.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

Tamaño y grosor

size va de "1" a "9", y cuanto mayor es, más se reducen en proporción el interlineado y el espaciado. Dentro de una frase, si no le das size, toma el tamaño del texto que lo rodea.

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

Color

Con color_scheme usas otro color en lugar del del tema. Ajústalo al sentido: red para el código de un mensaje de error, gray para un nombre de archivo neutro.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

Dentro de una frase

Si mezclas cadenas y rx.code como hijos de rx.text, el código aparece en mitad de la frase. El tamaño sigue el size del rx.text exterior.

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

Completar el pedido

Los comandos van con el soft por defecto y los nombres de archivo con un outline gris. El recuadro de aviso es un rx.callout.

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

Notas del taller

rx.code("…") es para código corto dentro de una frase. Varias líneas y resaltado: rx.code_block.
variant: solid · soft (por defecto) · outline · ghost. high_contrast lo oscurece.
Si no le das size, toma el tamaño del rx.text que lo rodea.
color_scheme según el sentido (error red, neutro gray).

← Anterior

Tipografía · Link

Tipografía · Markdown

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