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

Link

rx.linkrx.redirect

Documentación oficial

Pedido del taller

En el pie de página del sitio, pon dos enlaces a páginas del propio sitio y uno externo que se abra en una pestaña nueva.

rx.link es un texto que, al pulsarlo, te lleva a otro sitio. El destino se escribe en href: puede ser una dirección externa (https://…), una ruta de esta app (/courses) o un punto de la misma página (#id).

Reflex Home Page.

rx.link("Reflex Home Page.", href="https://reflex.dev/")

Prueba las propiedades

El aspecto de un enlace son las mismas propiedades de texto de rx.text más underline. Si activas is_external, se abre en una pestaña nueva.

Prueba las propiedades

Visit Reflex

label

underline

size

weight

trim

color

high_contrast

is_external

rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)

underline decide cuándo se ve el subrayado. Con auto lo decide Radix según el caso; normalmente aparece al pasar el ratón.

Propiedad	Valores	Por defecto	Uso
`href`	cadena con la dirección	ninguno	Destino: dirección externa, ruta de la app o `#id`
`is_external`	`True` / `False`	`False`	Abrir en una pestaña nueva (`target="_blank"`)
`underline`	`"auto"` `"hover"` `"always"` `"none"`	`"auto"`	Cuándo se ve el subrayado
`size`	`"1"` ~ `"9"`	heredado	Tamaño de letra
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	heredado	Grosor
`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
`target`	`"_self"` `"_blank"` `"_parent"` `"_top"`	ninguno	Indica directamente dónde se abre
`rel`	cadena	ninguno	Relación del enlace (`"nofollow"`, `"noopener"` …)
`download`	`True` o nombre de archivo	ninguno	Descargar como archivo en lugar de navegar
`referrer_policy` · `href_lang` · `media` · `ping`	atributos HTML de `<a>`	ninguno	Se pasan tal cual a `<a>`

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

A otra página de la app

Si href empieza por /, es una ruta de esta app. No hace falta escribir la dirección completa, y Reflex no recarga la página: solo cambia la pantalla (navegación en el cliente). Por eso el cambio es más rápido que con un enlace externo.

Home Courses

rx.flex(
    rx.link("Home", href="/"),
    rx.link("Courses", href="/courses"),
    spacing="4",
)

Envolver otros componentes

Si como hijo pones un botón o una tarjeta en lugar de texto, todo ese componente se convierte en enlace. Al envolver bloques grandes como una tarjeta, lo habitual es quitar el subrayado con underline="none".

Reflex docs

Open the official docs

rx.flex(
    rx.link(rx.button("Example"), href="https://reflex.dev/"),
    rx.link(
        rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
        href="https://reflex.dev/docs/",
        is_external=True,
        underline="none",
    ),
    spacing="4",
    align="center",
    wrap="wrap",
)

Anclas: a un punto de la página

Si das id="lib-link-footer" a un componente, un enlace con href="#lib-link-footer" desplaza la pantalla hasta ahí. Para un punto de otra página, añade # y el id tras la ruta, como en "/courses/some-page#lib-link-footer". Si pulsas el enlace de abajo, irás al ejemplo de «Completar el pedido» al final de esta página.

Jump to the footer below

rx.link("Jump to the footer below", href="#lib-link-footer")

Subrayado, tamaño y color

Compara los cuatro valores de underline. Con hover el subrayado solo aparece al pasar el ratón, y auto normalmente se comporta igual. El tamaño, el grosor, el color, el contraste y trim funcionan como en rx.text.

underline auto underline hover underline always underline none

rx.flex(
    rx.link("underline auto", href="#", underline="auto"),
    rx.link("underline hover", href="#", underline="hover"),
    rx.link("underline always", href="#", underline="always"),
    rx.link("underline none", href="#", underline="none"),
    direction="column",
    spacing="3",
)

Size 2, regular Size 4, medium Size 6, bold crimson high contrast With Trim

rx.flex(
    rx.link("Size 2, regular", href="#", size="2"),
    rx.link("Size 4, medium", href="#", size="4", weight="medium"),
    rx.link("Size 6, bold", href="#", size="6", weight="bold"),
    rx.link("crimson", href="#", color_scheme="crimson"),
    rx.link("high contrast", href="#", high_contrast=True),
    rx.link(
        "With Trim",
        href="#",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

Navegar desde el State: rx.redirect

Para cambiar de página cuando un event handler termina su trabajo, como tras guardar algo, en lugar de un enlace devuelve rx.redirect("ruta"). Al pulsar el botón de abajo irás a la página de inicio.

class LinkRedirectState(rx.State):
    @rx.event
    def go_home(self):
        return rx.redirect("/")


rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)

Completar el pedido

Los enlaces internos llevan href="/…" y el externo se abre en una pestaña nueva con is_external=True. Los enlaces del pie van en gris y con underline="hover" para que no llamen tanto la atención. Este pie tiene id="lib-link-footer", así que el enlace ancla de arriba trae hasta aquí.

rx.flex(
    rx.text("Shop", weight="bold", size="2"),
    rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
    rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
    rx.spacer(),
    rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
            color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
    id="lib-link-footer",
    spacing="4",
    align="center",
    wrap="wrap",
    padding="12px 16px",
    border_top=f"1px solid {rx.color('gray', 6)}",
    width="100%",
)

Notas del taller

rx.link("texto", href="…"). Vale una dirección externa, una ruta de la app (/…) o un #id de la misma página.
Las rutas de la app navegan sin recargar la página. Para una pestaña nueva, is_external=True.
underline: auto · hover · always · none. El resto de propiedades de texto son como en rx.text.
Si pones un botón o una tarjeta como hijo, todo se convierte en enlace.
Para navegar desde un handler: return rx.redirect("/ruta").

← Anterior

Tipografía · Heading

Tipografía · Code

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