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

Otras herramientas

Skeleton

rx.skeleton

Documentación oficial

Pedido del taller

Durante los 1-2 segundos que tarda en cargar la tarjeta de perfil, muestra huecos grises del mismo tamaño para que la pantalla no dé saltos.

rx.skeleton es un marcador de posición gris que ocupa el sitio del contenido mientras se carga. Si envuelve a un hijo, se convierte en una caja parpadeante del tamaño de ese hijo, y al terminar la carga el contenido real aparece en el mismo sitio, así que la disposición de la pantalla no se mueve. Si no das loading, queda en estado de marcador.

rx.skeleton(rx.button("Loading button"))

Prueba las propiedades

Al desactivar loading, el marcador desaparece y se ve el contenido real. Un rx.skeleton sin hijos fija su tamaño con width·height.

Prueba las propiedades

title

width

height

rx.vstack(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="RX", size="4"), loading=True),
        rx.box(
            rx.skeleton(rx.heading("Grace Hopper", size="3"), loading=True),
            rx.skeleton(rx.text("Posted two days ago.", size="2"), loading=True),
        ),
        rx.skeleton(rx.button("Follow"), loading=True),
        spacing="3",
        align="center",
    ),
    rx.skeleton(width="240px", height="24px", loading=True),
    spacing="4",
)

Con loading activado no se puede pulsar el botón de dentro. El marcador conserva el tamaño del hijo, así que al desactivarlo la disposición no se mueve.

Propiedad	Valores	Por defecto	Uso
`loading`	`True` / `False`	`True`	Mostrar el marcador o el contenido real
`width` `height`	Longitud CSS (admite responsive)	Tamaño del hijo	Tamaño del marcador
`min_width` `max_width`	Longitud CSS	Ninguno	Ancho mínimo y máximo
`min_height` `max_height`	Longitud CSS	Ninguno	Altura mínima y máxima

Tamaño y loading

Es el ejemplo de la documentación oficial. Los dos marcadores que envuelven botones cambian de altura con height, y los dos de abajo muestran loading en True y en False.

Text is already loaded.

rx.vstack(
    rx.skeleton(rx.button("button-small"), height="10px"),
    rx.skeleton(rx.button("button-big"), height="20px"),
    rx.skeleton(rx.text("Text is loaded."), loading=True),
    rx.skeleton(rx.text("Text is already loaded."), loading=False),
)

Al texto se le envuelve el propio texto

El marcador de un texto no envuelve al padre del texto, sino al propio texto. Si envuelves al padre, se vuelve gris todo su ancho; si envuelves el texto, solo se vuelve gris la longitud real del texto. Se escribe así: rx.text(rx.skeleton("...")).

Wrap the parent:

Wrap the text itself:

rx.vstack(
    rx.text("Wrap the parent:", size="1", color_scheme="gray"),
    rx.skeleton(rx.box(rx.text("Short text"), width="100%")),
    rx.text("Wrap the text itself:", size="1", color_scheme="gray"),
    rx.text(rx.skeleton("Short text")),
    width="300px",
)

Dar el tamaño directamente

Con solo width·height y sin hijos, obtienes una caja de marcador vacía. Sirve para reservar de antemano el sitio de líneas, imágenes o iconos cuyo contenido aún no se conoce.

rx.vstack(
    rx.skeleton(width="240px", height="16px"),
    rx.skeleton(width="180px", height="16px"),
    rx.skeleton(width="100%", max_width="320px", height="80px"),
    rx.skeleton(width="48px", height="48px"),
    width="100%",
)

Completar el pedido

Al pulsar Reload, un evento en segundo plano activa loading, espera 1,5 segundos y lo desactiva. Mientras tanto, el avatar, el nombre y la presentación se convierten en marcadores, cada uno con su tamaño. El texto de presentación envuelve el texto dentro de rx.text, así que solo se vuelve gris la longitud del texto.

Ada Lovelace

Wrote the first program.

import asyncio


class SkeletonProfileState(rx.State):
    loading: bool = False
    name: str = "Ada Lovelace"
    bio: str = "Wrote the first program."

    @rx.event(background=True)
    async def reload_profile(self):
        async with self:
            self.loading = True
        await asyncio.sleep(1.5)
        async with self:
            self.loading = False


rx.card(
    rx.flex(
        rx.skeleton(rx.avatar(fallback="AL", size="5", radius="full"), loading=SkeletonProfileState.loading),
        rx.box(
            rx.skeleton(rx.heading(SkeletonProfileState.name, size="4"), loading=SkeletonProfileState.loading),
            rx.text(rx.skeleton(SkeletonProfileState.bio, loading=SkeletonProfileState.loading), size="2", color_scheme="gray"),
        ),
        spacing="4",
        align="center",
    ),
    rx.button(
        "Reload",
        on_click=SkeletonProfileState.reload_profile,
        disabled=SkeletonProfileState.loading,
        variant="soft",
        margin_top="12px",
    ),
    max_width="360px",
)

Notas del taller

rx.skeleton(hijo) se convierte en un marcador gris del mismo tamaño que el hijo.
Con loading=False, contenido real. Si no se indica, estado de marcador (True).
Al texto se le envuelve el propio texto, no al padre: rx.text(rx.skeleton("...")).
Sin hijos, reserva un hueco vacío con width·height.
Mientras se muestra el marcador, no se pueden pulsar los botones ni las casillas de dentro.

← Anterior

Otras herramientas · Theme

Otras herramientas · Clipboard

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