Add demo showing how to only react to user interactions (#3678)

* Add demo demonstrating how to only react to user interactions with ui.switch and ui.checkbox * review --------- Co-authored-by: Falko Schindler <[email protected]>
zauberzeug · Sep 6, 2024 · 0ae841e · 0ae841e
1 parent 42f8e47
commit 0ae841e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/website/documentation/content/checkbox_documentation.py b/website/documentation/content/checkbox_documentation.py
@@ -9,4 +9,18 @@ def main_demo() -> None:
     ui.label('Check!').bind_visibility_from(checkbox, 'value')
 
 
+@doc.demo('Handle User Interaction', '''
+    The `on_change` function passed via parameter will be called when the checkbox is clicked
+    *and* when the value changes via `set_value` call.
+    To execute a function only when the user interacts with the checkbox, you can use the generic `on` method.
+''')
+def user_interaction():
+    with ui.row():
+        c1 = ui.checkbox(on_change=lambda e: ui.notify(str(e.value)))
+        ui.button('set value', on_click=lambda: c1.set_value(not c1.value))
+    with ui.row():
+        c2 = ui.checkbox().on('click', lambda e: ui.notify(str(e.sender.value)))
+        ui.button('set value', on_click=lambda: c2.set_value(not c2.value))
+
+
 doc.reference(ui.checkbox)
diff --git a/website/documentation/content/switch_documentation.py b/website/documentation/content/switch_documentation.py
@@ -9,4 +9,18 @@ def main_demo() -> None:
     ui.label('Switch!').bind_visibility_from(switch, 'value')
 
 
+@doc.demo('Handle User Interaction', '''
+    The `on_change` function passed via parameter will be called when the switch is clicked
+    *and* when the value changes via `set_value` call.
+    To execute a function only when the user interacts with the switch, you can use the generic `on` method.
+''')
+def user_interaction():
+    with ui.row():
+        s1 = ui.switch(on_change=lambda e: ui.notify(str(e.value)))
+        ui.button('set value', on_click=lambda: s1.set_value(not s1.value))
+    with ui.row():
+        s2 = ui.switch().on('click', lambda e: ui.notify(str(e.sender.value)))
+        ui.button('set value', on_click=lambda: s2.set_value(not s2.value))
+
+
 doc.reference(ui.switch)