generated from xinetzone/xbook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
circular-progress.md
37 lines (27 loc) · 1.2 KB
/
circular-progress.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
# {func}`~nicegui.ui.circular_progress` 环形进度条
环形进度条,包装了Quasar的[QCircularProgress](https://quasar.dev/vue-components/circular-progress)。
- `value`: 字段的初始值
- `min`: 最小值(默认:`0.0`)
- `max`: 最大值(默认:`1.0`)
- `size`: 进度圈的大小(默认:`"xl"`)
- `show_value`: 是否在中心显示值标签(默认:`True`)
- `color`: 颜色(可以是Quasar、Tailwind或CSS颜色,或者None,默认:`"primary"`)
```python
from nicegui import ui
slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
ui.circular_progress().bind_value_from(slider, 'value')
# ui.run()
```
## {func}`~nicegui.ui.circular_progress` 嵌套元素
您可以使用 `with` 语句,在环形进度条中放置任何元素,如图标、按钮等。只需确保它适应边界并禁用显示值的默认行为。
```python
from nicegui import ui
with ui.row().classes('items-center m-auto'):
with ui.circular_progress(value=0.1, show_value=False) as progress:
ui.button(
icon='star',
on_click=lambda: progress.set_value(progress.value + 0.1)
).props('flat round')
ui.label('click to increase progress')
# ui.run()
```