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

Heading

rx.heading

Documentación oficial

Pedido del taller

En la página de una campaña de la tienda, pon un título de página grande y, debajo, dos títulos de categoría del mismo tamaño.

rx.heading es el título de una página o de una sección. Usa las mismas propiedades de texto que rx.text (size, weight, align, trim, color), pero por defecto es grande y en negrita, y con as_ fija el nivel de título, de h1 a h6. El nivel forma la estructura del índice del documento, así que se piensa aparte del aspecto.

The quick brown fox jumps over the lazy dog.

rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")

Prueba las propiedades

Si cambias as_, la pantalla no cambia; el tamaño solo cambia con size. Cambia una y otra por separado y observa la diferencia.

Prueba las propiedades

Spring Collection

label

as_

size

weight

align

trim

color

high_contrast

rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_ fija la estructura del documento (h1~h6) y size el tamaño visible. Las dos propiedades no se afectan entre sí.

Propiedad	Valores	Por defecto	Uso
`as_`	`"h1"` ~ `"h6"`	`"h1"`	Nivel de título (estructura del documento); el aspecto no cambia
`size`	`"1"` ~ `"9"`	`"6"`	Tamaño visible, interlineado y espaciado entre letras
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	`"bold"`	Grosor
`align`	`"left"` `"center"` `"right"`	heredado	Alineación
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Recorta el margen del interlineado arriba y abajo
`color_scheme`	nombre de color Radix	color del tema	Color del texto
`high_contrast`	`True` / `False`	`False`	Aumenta el contraste con el fondo
`as_child`	`True` / `False`	`False`	Aplica solo el estilo de título al elemento hijo

En cuanto a eventos, solo tiene los básicos, como on_click.

as_ es estructura, size es aspecto

Las tres líneas de arriba tienen niveles distintos (h2, h3, h4), pero el mismo tamaño, porque as_ solo cambia el significado. Como en las tres de abajo, si reduces size a mano a medida que baja el nivel, estructura y aspecto coinciden. Lo habitual es tener un solo h1 por página.

Level 2

Level 3

Level 4

Page title

Section

Subsection

rx.flex(
    rx.heading("Level 2", as_="h2"),
    rx.heading("Level 3", as_="h3"),
    rx.heading("Level 4", as_="h4"),
    rx.separator(),
    rx.heading("Page title", as_="h1", size="8"),
    rx.heading("Section", as_="h2", size="6"),
    rx.heading("Subsection", as_="h3", size="4"),
    direction="column",
    spacing="3",
)

Tamaño, grosor y alineación

size va de "1" a "9". Cuanto más grande es el texto, más se reducen en proporción el interlineado y el espaciado, así que incluso un título grande no se ve disperso.

Size 1

Size 3

Size 5

Size 7

Size 9

rx.flex(
    rx.heading("Size 1", size="1"),
    rx.heading("Size 3", size="3"),
    rx.heading("Size 5", size="5"),
    rx.heading("Size 7", size="7"),
    rx.heading("Size 9", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.heading("Light", as_="h2", weight="light"),
    rx.heading("Regular", as_="h2", weight="regular"),
    rx.heading("Medium", as_="h2", weight="medium"),
    rx.heading("Bold", as_="h2", weight="bold"),
    rx.separator(),
    rx.heading("Left-aligned", as_="h2", align="left"),
    rx.heading("Center-aligned", as_="h2", align="center"),
    rx.heading("Right-aligned", as_="h2", align="right"),
    direction="column",
    spacing="3",
    width="100%",
)

trim: ajustar el margen sobre el título

Un título tiene letras grandes y, por tanto, un margen de interlineado grande. Con trim="start" recortas el de arriba, y el relleno superior de una tarjeta o caja parece igual al de los lados. "both" recorta arriba y abajo.

Without Trim

With Trim

With trim

The heading now sits as close to the top edge as the text does to the sides.

rx.flex(
    rx.heading(
        "Without Trim",
        as_="h2",
        trim="normal",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.heading(
        "With Trim",
        as_="h2",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
        rx.text("The heading now sits as close to the top edge as the text does to the sides."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Color y contraste

Con color_scheme usas un color distinto al del tema, y con high_contrast=True lo oscureces dentro de la misma gama. A la izquierda, el normal; a la derecha, el de alto contraste.

Indigo

Cyan

Crimson

rx.grid(
    rx.heading("Indigo", as_="h3", color_scheme="indigo"),
    rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
    rx.heading("Cyan", as_="h3", color_scheme="cyan"),
    rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
    rx.heading("Crimson", as_="h3", color_scheme="crimson"),
    rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
    columns="2",
    spacing="2",
)

Cambiar el tamaño según el ancho de pantalla

size, weight, align y trim aceptan, en lugar de una cadena, un dict con valores por ancho de pantalla. El título de abajo es "4" en pantallas estrechas, "6" desde sm y "8" desde md. Prueba a estrechar la ventana.

Resize the window

rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})

Completar el pedido

El título de la página va grande con h1, y los dos títulos de categoría van con h2 y el mismo tamaño. Al título superior le recortamos el margen de arriba con trim="start".

Spring Collection

New arrivals for warmer days.

Shirts

Linen and cotton, six colors.

Shoes

Light sneakers and sandals.

rx.box(
    rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
    rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
    rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
    rx.text("Linen and cotton, six colors.", size="2"),
    rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
    rx.text("Light sneakers and sandals.", size="2"),
)

Notas del taller

rx.heading es por defecto h1, size "6" y en negrita. Con as_ fijas el nivel, de h1 a h6.
as_ solo cambia la estructura del documento y size solo el aspecto. En niveles profundos, reduce size a mano.
weight, align, color_scheme y high_contrast funcionan igual que en rx.text.
trim="start" ajusta el margen sobre un título dentro de una caja.
Puedes dar valores por ancho de pantalla, como size={"initial": "4", "md": "8"}.

← Anterior

Tipografía · Text

Tipografía · Link

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