Simple nesting elements inside circular_progress

nicegui/elements/progress.py

@@ -60,7 +60,7 @@ def __init__(self,
  self._props['min'] = min
  self._props['max'] = max
  self._props['size'] = size
- self._props['show-value'] = show_value
+ self._props['show-value'] = True # NOTE always activate the default slot because this is expected by ui.element
  self._props['track-color'] = 'grey-4'
 
  if show_value:

website/more_documentation/circular_progress_documentation.py

@@ -1,6 +1,23 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
  slider = ui.slider(min=0, max=1, step=0.01, value=0.5)
  ui.circular_progress().bind_value_from(slider, 'value')
+
+
+def more() -> None:
+ @text_demo('Nested Elements', '''
+ You can put any element like icon, button etc inside a circular progress using the `with` statement.
+ Just make sure it fits the bounds and disable the default behavior of showing the value.
+ ''')
+ def icon() -> None:
+ 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')