introduce switch widget

solara/components/__init__.py

@@ -51,6 +51,7 @@
 from .tooltip import Tooltip  # noqa: #F401 F403
 from .card import Card, CardActions  # noqa: #F401 F403
 from .spinner import SpinnerSolara  # noqa: #F401 F403
+from .switch import Switch  # noqa: #F401 F403
 from .progress import ProgressLinear  # noqa: #F401 F403
 from .component_vue import _component_vue, component_vue  # noqa: #F401 F403
 import reacton.core

solara/components/switch.py

@@ -0,0 +1,55 @@
+from typing import Callable, Union
+
+import reacton.ipyvuetify as v
+
+import solara
+
+
+@solara.value_component(bool)
+def Switch(
+    *,
+    label=None,
+    value: Union[bool, solara.Reactive[bool]] = True,
+    on_value: Callable[[bool], None] = None,
+    disabled=False,
+    style: str = None,
+):
+    """A switch component provides users the ability to choose between two distinct values. But aesthetically different
+    from a checkbox.
+
+    Basic examples
+
+    ```solara
+    import solara
+
+    show_message = solara.reactive(True)
+    disable = solara.reactive(False)
+
+
+    @solara.component
+    def Page():
+        with solara.Column():
+            with solara.Row():
+                solara.Switch(label="Hide Message", value=show_message, disabled=disable.value)
+                solara.Switch(label="Disable Message Switch", value=disable)
+
+            if show_message.value:
+                solara.Markdown("## Use Switch to show/hide message")
+
+    ```
+
+
+    ## Arguments
+
+     * `label`: The label to display next to the switch.
+     * `value`: The current value of the switch (True or False).
+     * `on_value`: A callback that is called when the switch is toggled.
+     * `disabled`: If True, the switch is disabled and cannot be used.
+     * `style`: A string of CSS styles to apply to the switch.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+    children = []
+    if label is not None:
+        children = [label]
+    return v.Switch(label=label, v_model=reactive_value.value, on_v_model=reactive_value.set, disabled=disabled, style_=style, children=children)

solara/website/pages/api/switch.py

@@ -0,0 +1,13 @@
+"""# Switch
+
+"""
+
+import solara
+from solara.website.utils import apidoc
+
+from . import NoPage
+
+Page = NoPage
+
+
+__doc__ += apidoc(solara.Switch.f)  # type: ignore

tests/unit/switch_test.py

@@ -0,0 +1,19 @@
+from unittest.mock import MagicMock
+
+import ipyvuetify as vw
+
+import solara
+
+
+def test_switch():
+    on_value = MagicMock()
+    el = solara.Switch(label="label", value=True, on_value=on_value)
+    _, rc = solara.render(el, handle_error=False)
+    switch = rc.find(vw.Switch)
+    switch.widget.v_model = False
+    assert on_value.call_count == 1
+    switch.widget.v_model = False
+    assert on_value.call_count == 1
+    switch.widget.v_model = True
+    assert on_value.call_count == 2
+    rc.close()