PyCafe - Dash - Dash Mantine Stepper Guide with callbacks pr-270

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html, Input, Output, State, callback, ctx
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)


min_step = 0
max_step = 3
active = 1

stepper = html.Div(
    [
        dmc.Stepper(
            id="stepper-basic-usage",
            active=active,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    children=dmc.Text("Step 1 content: Create an account", ta="center"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    children=dmc.Text("Step 2 content: Verify email", ta="center"),
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    children=dmc.Text("Step 3 content: Get full access", ta="center"),
                ),
                dmc.StepperCompleted(
                    children=dmc.Text(
                        "Completed, click back button to get to previous step",
                        ta="center",
                    )
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-basic-usage", variant="default"),
                dmc.Button("Next step", id="next-basic-usage"),
            ],
        ),
    ]
)


@callback(
    Output("stepper-basic-usage", "active"),
    Input("back-basic-usage", "n_clicks"),
    Input("next-basic-usage", "n_clicks"),
    State("stepper-basic-usage", "active"),
    prevent_initial_call=True,
)
def update(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-basic-usage":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step

@callback(
    Output("container","children"),
    Input("stepper-basic-usage", "active")
)
def update(active):
    return f"You are on step {active}"



app.layout = dmc.MantineProvider([
    stepper,
    html.Div(id="container")

])

if __name__ == "__main__":
    app.run(debug=True)
Py.Cafe

dash-mantine-stepper-guide

Dash Mantine Stepper Guide with callbacks pr-270
