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

Superposiciones

Hover Card

rx.hover_card.rootrx.hover_card.triggerrx.hover_card.content

Documentación oficial

Pedido del taller

Al pasar el ratón por el nombre del autor de un comentario, muestra una tarjetita con su foto y una breve presentación.

rx.hover_card es una tarjeta que aparece al pasar el ratón por un elemento, por ejemplo un enlace. Es más grande que un tooltip y sirve para vistas previas con contenido rico, como fotos o varias líneas de texto. Se construye con tres partes.

hover_card.root: envuelve todas las partes de la hover card.
hover_card.trigger: envuelve el elemento (normalmente un enlace) que abre la tarjeta al pasar el ratón.
hover_card.content: el contenido que se ve al abrirse.

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.text("This is the hovercard content."),
        ),
    ),
)

Prueba las propiedades

La posición y el tamaño van en hover_card.content. Cambia un valor y pasa el ratón por el enlace.

Prueba las propiedades

Hover over me

text

side

align

size

avoid_collisions

rx.hover_card.root(
    rx.hover_card.trigger(rx.link("Hover over me", underline="always")),
    rx.hover_card.content(
        rx.text("Preview of the linked page"),
        side="bottom",
        align="center",
        size="2",
        avoid_collisions=True,
    ),
)

size, de "1" a "3", fija el relleno interior. Por defecto aparece abajo (bottom) y centrada (center).

Parte	Propiedad	Valores	Uso
`root`	`open_delay`	Milisegundos (entero)	Espera desde que llega el ratón hasta que se abre
`root`	`close_delay`	Milisegundos (entero)	Espera desde que se va el ratón hasta que se cierra
`root`	`open` · `default_open`	`True` / `False`	Decidir la apertura desde el State (controlado) · abierta al principio (no controlado)
`root`	`on_open_change`	Evento	Al abrirse o cerrarse. Pasa el nuevo valor de apertura (bool)
`content`	`side` · `align`	Nombre de posición	Lado en el que aparece y alineación
`content`	`side_offset` · `align_offset`	Entero (px)	Separación con el enlace y desplazamiento extra desde la alineación
`content`	`size`	`"1"` `"2"` `"3"`	Tamaño del relleno interior
`content`	`avoid_collisions` · `collision_padding`	bool · número	Moverse al chocar con el borde de la pantalla y ese margen
`content`	`sticky` · `hide_when_detached`	`"partial"` `"always"` · bool	Cuánto sigue pegada al hacer scroll; ocultarse si el enlace queda tapado

trigger y content solo tienen los eventos comunes; no definen eventos propios.

Contenido rico

En content caben también rejillas e imágenes. Con rx.inset(side="left") la imagen llega hasta el borde izquierdo de la tarjeta, y a la derecha van el título y la descripción. El ancho de la tarjeta se fija directamente en content, como style={"width": 360}.

Hover over the text to see the card. Hover over me

rx.text(
    "Hover over the text to see the card. ",
    rx.hover_card.root(
        rx.hover_card.trigger(
            rx.link("Hover over me", color_scheme="blue", underline="always"),
        ),
        rx.hover_card.content(
            rx.grid(
                rx.inset(
                    side="left",
                    pr="current",
                    background="url('https://picsum.photos/id/1062/240/320') center/cover",
                    height="full",
                ),
                rx.box(
                    rx.heading("Kitsune", size="3"),
                    rx.text("A curious fox who lives in the workshop and inspects every new part.", size="2"),
                    padding_left="12px",
                ),
                columns="120px 1fr",
            ),
            style={"width": 360},
        ),
    ),
)

Tiempos de apertura: open_delay y close_delay

Es molesto que la tarjeta salte cada vez que el ratón pasa de largo. open_delay fija la espera hasta abrirse y close_delay la espera hasta cerrarse, en milisegundos. Pasa el ratón por los dos enlaces, uno tras otro, para notar la diferencia.

Fast (open_delay=100)Slow (open_delay=1200)

rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Fast (open_delay=100)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 100 ms")),
        open_delay=100,
        close_delay=100,
    ),
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Slow (open_delay=1200)", underline="always")),
        rx.hover_card.content(rx.text("Opened after 1200 ms")),
        open_delay=1200,
        close_delay=600,
    ),
    spacing="5",
    wrap="wrap",
)

Al abrirse y cerrarse: on_open_change

El on_open_change de hover_card.root pasa True cuando se abre y False cuando se cierra.

Opened or closed: 0 times

Hover card open: no

Hover over the text to see the hover card. Hover over me

class HoverCardEventState(rx.State):
    num_opens: int = 0
    opened: bool = False

    @rx.event
    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


rx.flex(
    rx.text("Opened or closed: ", HoverCardEventState.num_opens, " times"),
    rx.text("Hover card open: ", rx.cond(HoverCardEventState.opened, "yes", "no")),
    rx.text(
        "Hover over the text to see the hover card. ",
        rx.hover_card.root(
            rx.hover_card.trigger(
                rx.link("Hover over me", color_scheme="blue", underline="always"),
            ),
            rx.hover_card.content(
                rx.text("This is the hover card content."),
            ),
            on_open_change=HoverCardEventState.count_opens,
        ),
    ),
    direction="column",
    spacing="3",
)

Abrir y cerrar desde el State

Si conectas un valor del State a open, puedes dejar la tarjeta abierta con un interruptor. Como on_open_change está conectado al mismo handler, el interruptor también se mueve al pasar y retirar el ratón.

Release notes

open

class HoverCardControlState(rx.State):
    pinned: bool = False

    @rx.event
    def set_pinned(self, value: bool):
        self.pinned = value


rx.flex(
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("Release notes", underline="always")),
        rx.hover_card.content(rx.text("v2.4: faster search, new export button.", size="2")),
        open=HoverCardControlState.pinned,
        on_open_change=HoverCardControlState.set_pinned,
    ),
    rx.switch(checked=HoverCardControlState.pinned, on_change=HoverCardControlState.set_pinned),
    rx.text("open", size="2", color_scheme="gray"),
    spacing="3",
    align="center",
)

Completar el pedido

Al pasar el ratón por el enlace con el nombre del autor aparece una tarjeta con su avatar, su nombre y su presentación. Subimos un poco open_delay para que no salte con el ratón que solo pasa de largo.

Great tutorial! — @mina

rx.text(
    "Great tutorial! — ",
    rx.hover_card.root(
        rx.hover_card.trigger(rx.link("@mina", weight="bold")),
        rx.hover_card.content(
            rx.flex(
                rx.avatar(src="https://picsum.photos/id/64/120/120", fallback="MK", size="4", radius="full"),
                rx.box(
                    rx.heading("Mina Kim", size="3"),
                    rx.text("@mina", size="2", color_scheme="gray"),
                    rx.text("Frontend developer. Writes about Python web apps.", size="2", margin_top="6px"),
                ),
                spacing="3",
            ),
            side="top",
            align="start",
            style={"width": 300},
        ),
        open_delay=400,
    ),
    size="2",
)

Notas del taller

Tres partes: root · trigger · content. Se abre al pasar el ratón y se cierra al retirarlo (no hace falta pulsar).
open_delay · close_delay (milisegundos, enteros) evitan que reaccione al ratón que solo pasa.
Posición y tamaño en content (side, align, side_offset, size de "1" a "3").
on_open_change pasa el nuevo valor de apertura (bool). Si la controlas con open, conéctalo también.
En pantallas táctiles sin ratón no se abre, así que lo imprescindible debe estar también en la página enlazada.

← Anterior

Superposiciones · Popover

Superposiciones · Dialog

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