How to add ui.stepper into Modularization example?

[bbalendran]

Question

Experimenting with the ui.stepper and modularization:

How can I incorporate the navigation to a "page" when I click the next or back button on ui.stepper?

Modulation example path: https://github.com/zauberzeug/nicegui/tree/main/examples/modularization

Here is the menu.py file as part of "modulation" that I am trying to modify:

from nicegui import ui

def menu() -> None:
    with ui.stepper().props('vertical').classes('w-full') as stepper:
        with ui.step('Home'):
            ui.label('Preheat the oven to 350 degrees')       
            with ui.stepper_navigation():
                ui.button('Next', on_click=stepper.next)
        with ui.step('StepA'):
            ui.label('Add water and ingredients')
            with ui.stepper_navigation():
                ui.button('Next', on_click=stepper.next)
                ui.button('Back', on_click=stepper.previous).props('flat')
        with ui.step('StepB'):
            ui.label('Mix the ingredients')
            with ui.stepper_navigation():
                ui.button('Next', on_click=stepper.next)
                ui.button('Back', on_click=stepper.previous).props('flat')
        with ui.step('StepC'):                            
            ui.label('Bake for 20 minutes')
            with ui.stepper_navigation():
                ui.button('Done', on_click=lambda: ui.notify('Yay!', type='positive'))
                ui.button('Back', on_click=stepper.previous).props('flat')
   
   # ui.link('Home', '/').classes(replace='text-white')
   # ui.link('Step A', '/a').classes(replace='text-white')
   # ui.link('Step B', '/b').classes(replace='text-white')
   # ui.link('Step C', '/c').classes(replace='text-white')

[falkoschindler]

Hi @bbalendran,

You should be able to call ui.navigate.to() like this:

ui.button('Go to A', on_click=lambda: ui.navigate.to('/a'))

Combined with the existing callbacks it might look like this:

ui.button('Next', on_click=lambda: (stepper.next(), ui.navigate.to('/a')))

[bbalendran]

thanks. I will try this.