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

Code Block

rx.code_blockrx.code_block.themes

Documentación oficial

Pedido del taller

En la página de instalación, pon el «comando de instalación» y el «código de la primera app» en cajas de código coloreadas, con botón de copiar.

rx.code_block muestra código de varias líneas coloreado según el lenguaje. Se le pasa como primer argumento una cadena que conserve los saltos de línea y la sangría, y con language se indica el lenguaje. Para código breve dentro de una línea, usa rx.code. Todos los ejemplos de código de este curso se muestran también con rx.code_block.

1
2
3
4
5
def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)

rx.code_block(
    """def fib(n):
    if n <= 1:
        return n
    else:
        return fib(n - 1) + fib(n - 2)""",
    language="python",
    show_line_numbers=True,
)

Prueba las propiedades

Si cambias el lenguaje, el mismo texto se colorea de otra forma. También puedes escribir otra línea de código en la casilla de abajo.

Prueba las propiedades

1
SELECT name FROM users WHERE id = 1;

code

language

show_line_numbers

rx.code_block("SELECT name FROM users WHERE id = 1;", language="sql", show_line_numbers=True)

language define las reglas de coloreado. Si activas show_line_numbers, aparecen números de línea a la izquierda.

Propiedad	Valores	Por defecto	Uso
Primer argumento (`code`)	Cadena	Obligatorio	Código que se muestra
`language`	`"python"` `"javascript"` `"sql"` `"bash"` …	`"python"`	Reglas de coloreado
`theme`	`rx.code_block.themes.…`	`one_light` en modo claro, `one_dark` en modo oscuro	Combinación de colores
`show_line_numbers`	`True` / `False`	`False`	Números de línea
`starting_line_number`	Entero	`1`	Número de la primera línea
`wrap_long_lines`	`True` / `False`	`False`	Partir las líneas largas
`can_copy`	`True` / `False`	`False`	Botón de copiar arriba a la derecha
`copy_button`	Componente	Ninguno	Botón que sustituye al de copiar por defecto
`custom_style`	dict	Ninguno	Estilo de la caja de código
`code_tag_props`	dict	Ninguno	Propiedades para la etiqueta `code` interior

Temas

A theme se le da un valor de rx.code_block.themes. No acepta cadenas como "dracula". Si no lo indicas, se usa automáticamente one_light en modo claro y one_dark en modo oscuro.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.code_block.themes.dracula,
)

Para elegir tú el tema de cada modo, pasa a rx.color_mode_cond el valor para modo claro y el valor para modo oscuro.

print("Hello, world!")

rx.code_block(
    'print("Hello, world!")',
    language="python",
    theme=rx.color_mode_cond(
        light=rx.code_block.themes.one_light,
        dark=rx.code_block.themes.one_dark,
    ),
)

Si quieres elegir el tema con una cadena del State, como no puedes pasar la cadena directamente, asóciala al valor del tema con rx.match. Además hay unos 40 temas más, como nord, vs_dark, ghcolors, night_owl o material_dark.

for i in range(3):
    print(i)

class CodeBlockThemeState(rx.State):
    theme_name: str = "dracula"

    @rx.event
    def set_code_block_theme(self, value: str):
        self.theme_name = value


rx.vstack(
    rx.select(["dracula", "nord", "vs_dark", "ghcolors"], value=CodeBlockThemeState.theme_name, on_change=CodeBlockThemeState.set_code_block_theme),
    rx.code_block(
        "for i in range(3):\n    print(i)",
        language="python",
        theme=rx.match(
            CodeBlockThemeState.theme_name,
            ("dracula", rx.code_block.themes.dracula),
            ("nord", rx.code_block.themes.nord),
            ("vs_dark", rx.code_block.themes.vs_dark),
            rx.code_block.themes.ghcolors,
        ),
        width="100%",
    ),
    width="100%",
)

Números de línea y líneas largas

starting_line_number fija el número de la primera línea; sirve para conservar la numeración original al mostrar solo un fragmento de un archivo largo. wrap_long_lines=True pasa a la línea siguiente lo que se sale por la derecha.

10
11
12
13
total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")

rx.code_block(
    """total = 0
for price in [1200, 800, 450]:
    total += price
print(f"Total: {total} won, and this comment is long enough to show how wrapping works")""",
    language="python",
    show_line_numbers=True,
    starting_line_number=10,
    wrap_long_lines=True,
)

Botón de copiar y estilo

Con can_copy=True aparece un botón de copiar arriba a la derecha y, al pulsarlo, el código va al portapapeles. No figura en la tabla de propiedades de la documentación oficial, pero existe en Reflex 0.10. Para cambiar el aspecto del botón, pasa a copy_button uno hecho por ti.

pip install reflex

rx.code_block(
    "pip install reflex",
    language="bash",
    can_copy=True,
)

Las propiedades de estilo como width o font_size, y custom_style, se aplican a la caja de código. Lo que sea específico de la etiqueta code interior se pasa con code_tag_props.

{"name": "reflex", "version": "0.10.0"}

rx.code_block(
    '{"name": "reflex", "version": "0.10.0"}',
    language="json",
    custom_style={"borderRadius": "12px", "fontSize": "15px"},
    code_tag_props={"style": {"fontFamily": "monospace"}},
)

Completar el pedido

El comando de instalación se muestra en bash y el código de la primera app en python con números de línea; los dos llevan botón de copiar.

1. Install

pip install reflex

2. Create an app

1
2
3
4
5
6
7
8
9
import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)

rx.vstack(
    rx.text("1. Install", weight="bold"),
    rx.code_block("pip install reflex", language="bash", can_copy=True, width="100%"),
    rx.text("2. Create an app", weight="bold"),
    rx.code_block(
        """import reflex as rx


def index():
    return rx.text("Hello!")


app = rx.App()
app.add_page(index)""",
        language="python",
        show_line_numbers=True,
        can_copy=True,
        width="100%",
    ),
    width="100%",
)

Notas del taller

rx.code_block("código", language="python") crea una caja de código coloreada.
theme es rx.code_block.themes.nombre. No acepta cadenas; para elegirlo desde el State, rx.match.
Las líneas se controlan con show_line_numbers · starting_line_number · wrap_long_lines.
can_copy=True añade botón de copiar (0.10, no está en la tabla de la documentación); copy_button lo sustituye.

← Anterior

Visualización de datos · Data List

Visualización de datos · Progress

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