PyCafe - Dash - Modificación de Elementos Dinámicos en Dash

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import dash  
from dash import Dash, html, Input, Output, State, callback, ALL, set_props  
import dash_mantine_components as dmc  
from dash_iconify import DashIconify  
  
app = Dash(__name__)  
  
app.layout = dmc.MantineProvider([  
    dmc.Container([  
        dmc.Title("Modificación de elementos dinámicos", order=1, mb="lg"),  
          
        # Botón que dispara el callback  
        dmc.Button("Procesar Notificaciones", id="process-btn", mb="xl"),  
          
        # Contenedor de notificaciones con IDs dinámicos  
        dmc.NotificationContainer(id="notification-container"),  
          
        # Lista de elementos con IDs dinámicos que NO están en el Output  
        dmc.Stack([  
            dmc.Card([  
                dmc.Text(f"Elemento {i}", id={"type": "dynamic-element", "index": i}),  
                dmc.Progress(value=0, id={"type": "progress-bar", "index": i})  
            ], withBorder=True, p="md")  
            for i in range(1, 4)  
        ], id="elements-container")  
    ], size="lg")  
])  
  
@callback(  
    Output("notification-container", "sendNotifications"),  
    Input("process-btn", "n_clicks"),  
    prevent_initial_call=True  
)  
def process_elements(n_clicks):  
    """  
    Este callback solo tiene la notificación en el Output,  
    pero modifica elementos dinámicos usando set_props  
    """  
    import random  
      
    # Modificar elementos dinámicos que NO están en el Output  
    for i in range(1, 4):  
        # Actualizar texto del elemento dinámico  
        set_props(  
            {"type": "dynamic-element", "index": i},   
            {"children": f"Elemento {i} - Procesado {n_clicks}"}  
        )  
          
        # Actualizar barra de progreso dinámica  
        progress_value = random.randint(20, 100)  
        set_props(  
            {"type": "progress-bar", "index": i},   
            {"value": progress_value, "color": "green" if progress_value > 50 else "orange"}  
        )  
      
    # Retornar notificación (único elemento en Output)  
    return [{  
        "id": f"process-notification-{n_clicks}",  
        "title": "Procesamiento completado",  
        "message": f"Se han actualizado {3} elementos dinámicos",  
        "color": "green",  
        "autoClose": 3000  
    }]  
  
if __name__ == "__main__":  
    app.run_server(debug=True)
Py.Cafe

dash-dynamic-elements-set_props

Modificación de Elementos Dinámicos en Dash
