Pattern or Example of User-Walkthrough-App or Step-Form

Hi,

I was curious if anyone had a good example of a user walkthrough app. Something similar to the experience when purchasing a plane ticket. Something like

I feel like location/nav/multipage could handle the paging? Or it could even be one page?

I feel like the components on page are no problem?

However, I’m not sure of a straighforward way to achieve the 1-2-3 graphic. Could simulate with rendered components, but that might be harder/buggy.

Thanks!

Hi @rictuar what comes into my mind seeing this is dbc.Tabs with some css.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

EDIT:

I think I would use dash-mantine-components, looks pretty much the same as in the link you provided IMHO.

2 Likes

@AIMPED brilliant, thanks

this extra library really needs more publicity.

2 Likes

@snehilvj

I need some fairly advanced behavior from this app. The documentation for Stepper, here

says

  • children (a list of or a singular dash component, string or number; required):
    <Stepper.Step /> components only.

Does this mean that only select components will work with the stepper tool? Or am I free to encase an arbitrary compilation of components inside a Div?

I see, nevermind, sry. StepperSteps are children of the Stepper. StepperSteps may have arbitrary children.

1 Like