Simple nesting elements inside circular_progress

nicegui/elements/progress.py

@@ -60,7 +60,7 @@ class CircularProgress(ValueElement, TextColorElement):
         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')