Feat: add switch widget (#185)

* introduce switch widget

* - add class keyword
- typing style

* add switch to website/pages/init

* add switch to website/pages/init
add switch gif

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,68 @@
+from typing import Callable, Dict, List, Optional, Union
+
+import reacton.ipyvuetify as v
+
+import solara
+
+
+@solara.value_component(bool)
+def Switch(
+    *,
+    label: str = None,
+    value: Union[bool, solara.Reactive[bool]] = True,
+    on_value: Callable[[bool], None] = None,
+    disabled: bool = False,
+    children: list = [],
+    classes: List[str] = [],
+    style: Optional[Union[str, Dict[str, 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.
+     * `children`: A list of child elements to display on the switch.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    if label:
+        children = [label] + children
+
+    return v.Switch(
+        label=label,
+        v_model=reactive_value.value,
+        on_v_model=reactive_value.set,
+        disabled=disabled,
+        class_=solara.util._combine_classes(classes),
+        style_=solara.util._flatten_style(style),
+        children=children,
+    )

solara/website/pages/api/__init__.py

@@ -22,7 +22,7 @@
     {
         "name": "Input",
         "icon": "mdi-chevron-left-box",
-        "pages": ["button", "checkbox", "input", "select", "slider", "togglebuttons", "file_browser", "file_drop"],
+        "pages": ["button", "checkbox", "input", "select", "slider", "switch", "togglebuttons", "file_browser", "file_drop"],
     },
     {
         "name": "Output",

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()