generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
stepper.md
63 lines (51 loc) · 2.36 KB
/
stepper.md
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
# {func}`~nicegui.ui.step` 分步器
这个元素代表了 Quasar 的 [QStepper 组件](https://quasar.dev/vue-components/stepper#qstepper-api)。它包含各个独立的步骤。
为了避免在切换步骤时出现动态元素的问题,这个元素使用了 Vue 的 keep-alive 组件。如果客户端性能是一个问题,您可以禁用此功能。
`value`:ui.step 或最初选择的步骤的名称(默认:`None`,表示第一步)
`on_value_change`:当选定的步骤发生变化时要执行的回调函数
`keep_alive`:是否在内容上使用 Vue 的 keep-alive 组件(默认:`True`)
```python
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()
```
## {func}`~nicegui.ui.step` 动态分步器
步骤可以动态添加,并通过 `ui.move()` 定位。
```python
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()
```