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

Progress

rx.progress

Documentación oficial

Pedido del taller

Mientras se envía un archivo, muestra con una barra el porcentaje alcanzado y, al terminar, ponla en verde.

rx.progress muestra con una barra cuánto ha avanzado una tarea larga o de varios pasos. En value se da un valor entre 0 y 100. Por defecto ocupa el 100 % del ancho del contenedor.

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)

Prueba las propiedades

value y max solo aceptan enteros, así que no están en este banco de pruebas. Más abajo, en «Moverla con el State», tienes un ejemplo que mueve el valor.

Prueba las propiedades

size

variant

color

radius

high_contrast

rx.progress(value=60, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False)

size elige el grosor, variant el aspecto del fondo y color_scheme el color.

Propiedad	Valores	Por defecto	Uso
`value`	Entero	Ninguno	Progreso actual; sin él, la barra se mueve sin parar
`max`	Entero	`100`	Valor de la barra llena
`size`	`"1"` `"2"` `"3"`	`"2"`	Grosor de la barra
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aspecto del fondo
`color_scheme`	Nombre de color Radix	Color del tema	Color del relleno
`high_contrast`	`True` / `False`	`False`	Más contraste
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Valor del tema	Redondeo de las esquinas
`duration`	Tiempo como `"5s"`	Ninguno	Tiempo de llenado cuando no hay value
`fill_color`	Color CSS	Ninguno	Fija directamente el color de la parte rellena

Contar pasos con max

Si cambias max, puedes contar value en pasos. El paso 3 de 5 es value=3, max=5.

3 of 5 steps

rx.vstack(
    rx.text("3 of 5 steps"),
    rx.progress(value=3, max=5),
    width="50%",
)

Moverla con el State

Para cambiar el progreso, pasa un valor del State a value. Al mover el slider, la barra lo sigue.

30%

class ProgressSliderState(rx.State):
    value: int = 30

    @rx.event
    def set_progress_value(self, value: list[float]):
        self.value = int(value[0])


rx.vstack(
    rx.slider(default_value=[30], on_change=ProgressSliderState.set_progress_value),
    rx.progress(value=ProgressSliderState.value),
    rx.text(ProgressSliderState.value, "%"),
    width="50%",
)

Para trabajos que llevan tiempo, como una tarea real, sube el valor poco a poco desde un evento en segundo plano (@rx.event(background=True)). Cada cambio del State debe hacerse dentro de async with self: para que llegue a la pantalla al instante. Este ejemplo sube 5 cada 0,1 segundos y termina en 2 segundos; si vuelves a pulsar mientras corre, se ignora.

import asyncio


class ProgressLiveState(rx.State):
    value: int = 0
    running: bool = False

    @rx.event(background=True)
    async def start_progress(self):
        async with self:
            if self.running:
                return
            self.running = True
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 5
        async with self:
            self.running = False


rx.hstack(
    rx.progress(value=ProgressLiveState.value),
    rx.button("Start", on_click=ProgressLiveState.start_progress, loading=ProgressLiveState.running),
    width="60%",
    align="center",
)

Cuando no se conoce el valor

Si no das value, la barra se convierte en una animación que va y viene sin fin. Úsala para esperas cuya duración no conoces. Con duration, la barra simula llenarse durante ese tiempo y, pasado ese tiempo, cambia a la animación continua.

No value: endless animation

duration="5s": fills in 5 seconds, then keeps moving

rx.vstack(
    rx.text("No value: endless animation", size="2"),
    rx.progress(),
    rx.text('duration="5s": fills in 5 seconds, then keeps moving', size="2"),
    rx.progress(duration="5s"),
    width="60%",
)

Fijar el color de relleno

fill_color fija directamente, con un color CSS, el color de la parte rellena. Úsalo cuando necesites un color que no está en la lista de colores Radix.

rx.vstack(
    rx.progress(value=70, fill_color="orange"),
    rx.progress(value=40, fill_color="#2e8b57"),
    width="50%",
)

Completar el pedido

Al pulsar el botón, un evento en segundo plano sube la barra de 10 % en 10 %; cuando se llena, el texto de estado pasa a "Done" y la barra se vuelve verde. No se envía ningún archivo real.

report.pdf

Ready

import asyncio


class ProgressUploadState(rx.State):
    percent: int = 0
    status: str = "Ready"

    @rx.event(background=True)
    async def send_files(self):
        async with self:
            if self.status == "Uploading...":
                return
            self.status = "Uploading..."
            self.percent = 0
        for _ in range(10):
            await asyncio.sleep(0.2)
            async with self:
                self.percent += 10
        async with self:
            self.status = "Done"


rx.card(
    rx.vstack(
        rx.hstack(rx.icon("upload"), rx.text("report.pdf", weight="bold"), rx.spacer(), rx.text(ProgressUploadState.percent, "%"), width="100%", align="center"),
        rx.progress(value=ProgressUploadState.percent, color_scheme=rx.cond(ProgressUploadState.status == "Done", "green", "indigo")),
        rx.hstack(
            rx.text(ProgressUploadState.status, size="2", color_scheme="gray"),
            rx.spacer(),
            rx.button("Upload", size="1", on_click=ProgressUploadState.send_files),
            width="100%",
            align="center",
        ),
        width="100%",
    ),
    max_width="360px",
)

Notas del taller

rx.progress(value=…) es una barra de progreso de 0 a 100; max cambia el valor de referencia.
Pasa un valor del State a value; en tareas largas, súbelo desde un evento background con async with self.
Sin value hay una animación sin fin; con duration se llena durante ese tiempo.
Aspecto con size · variant · color_scheme · radius · high_contrast; color de relleno con fill_color.

← Anterior

Visualización de datos · Code Block

Visualización de datos · Spinner

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