stepper_navigation behavior

[pierrecdn]

Question

I'd like to get precisions regarding stepper_navigation. It seems using this pattern:

with ui.stepper():
  with ui.step():
    ...
  with ui.step():
    ...
  with ui.stepper_navigation():
    ...

is cleaner from a UI perspective (ie. navigation buttons always on page bottom, etc.).
But way less from a control standpoint, ie. if I want a custom prev/next label for each step, I'll have to duplicate, at the cost of loosing the clean positioning:

with ui.stepper():
  with ui.step():
    ...
    with ui.stepper_navigation():
        ...
  with ui.step():
    ...
     with ui.stepper_navigation():
        ...

What is your advice on that situation? Shouldn't this interface be updated somehow?

[rodja]

Right now the structure is similar to Quasar: https://quasar.dev/vue-components/stepper
But If you or anyone else has suggestions for improvement, we are happy to discuss it here.

[python-and-fiction]

In nicegui 1.4.28, following code could show what you say:

from nicegui import ui

with ui.card().classes('w-full'):
    with ui.stepper().props('vertical') as stepper:
        with ui.step('1'):
            ui.label('step 1')
        with ui.step('2'):
            ui.label('step 1')
        with ui.step('3'):
            ui.label('step 1')
    with ui.row():
            ui.button('Next', on_click=stepper.next).bind_visibility_from(stepper,'value',backward=lambda x:x!='3')
            ui.button('Done',color='green', on_click=lambda :ui.notify(stepper.value)).bind_visibility_from(stepper,'value',backward=lambda x:x=='3')
            ui.button('Back', on_click=stepper.previous).props('flat').bind_visibility_from(stepper,'value',backward=lambda x:x!='1')

ui.run()

[pierrecdn]

Seems to do the job nicely indeed, thanks!

[falkoschindler]

You can even use ui.stepper_navigation() instead of ui.row(). 🙂