From cf9bbd360a99d4a9160279b088236c61d45c227c Mon Sep 17 00:00:00 2001 From: Rodja Trappe Date: Sat, 26 Aug 2023 17:46:09 +0200 Subject: [PATCH] Simple nesting elements inside circular_progress --- nicegui/elements/progress.py | 2 +- .../circular_progress_documentation.py | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/nicegui/elements/progress.py b/nicegui/elements/progress.py index 76631e886..0d05dede8 100644 --- a/nicegui/elements/progress.py +++ b/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: diff --git a/website/more_documentation/circular_progress_documentation.py b/website/more_documentation/circular_progress_documentation.py index f97fd93c2..4933f23af 100644 --- a/website/more_documentation/circular_progress_documentation.py +++ b/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')