分步器

这个元素代表了 Quasar 的 QStepper 组件。它包含各个独立的步骤。

为了避免在切换步骤时出现动态元素的问题，这个元素使用了 Vue 的 keep-alive 组件。如果客户端性能是一个问题，您可以禁用此功能。

value：ui.step 或最初选择的步骤的名称（默认：None，表示第一步） on_value_change：当选定的步骤发生变化时要执行的回调函数 keep_alive：是否在内容上使用 Vue 的 keep-alive 组件（默认：True）

from nicegui import ui

with ui.stepper().props('vertical').classes('w-full') as stepper:
    with ui.step('Preheat'):
        ui.label('Preheat the oven to 350 degrees')
        with ui.stepper_navigation():
            ui.button('Next', on_click=stepper.next)
    with ui.step('Ingredients'):
        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('Bake'):
        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.run()

动态分步器

步骤可以动态添加，并通过 ui.move() 定位。

from nicegui import ui

def next_step() -> None:
    if extra_step.value and len(stepper.default_slot.children) == 2:
        with stepper:
            with ui.step('extra') as extra:
                ui.label('Extra')
                with ui.stepper_navigation():
                    ui.button('Back', on_click=stepper.previous).props('flat')
                    ui.button('Next', on_click=stepper.next)
            extra.move(target_index=1)
    stepper.next()

with ui.stepper().props('vertical').classes('w-full') as stepper:
    with ui.step('start'):
        ui.label('Start')
        extra_step = ui.checkbox('do extra step')
        with ui.stepper_navigation():
            ui.button('Next', on_click=next_step)
    with ui.step('finish'):
        ui.label('Finish')
        with ui.stepper_navigation():
            ui.button('Back', on_click=stepper.previous).props('flat')

# ui.run()