feat: add Scrollable component

solara/components/misc.py

@@ -115,6 +115,21 @@ def Div(children=[], classes: List[str] = [], style: Union[str, Dict[str, str],
     return v.Html(tag="div", children=children, class_=class_, style_=style_flat, **kwargs)
 
 
+@solara.component
+def Scrollable(children=[], max_height: str = "500px", classes: List[str] = [], style: Union[str, Dict[str, str], None] = None):
+    """Render children in a vertically scrollable container.
+
+    ## Arguments
+
+     * `children`: List of children to render in the container.
+     * `max_height`: Maximum height of the container as a CSS value.
+     * `classes`: List of CSS classes to apply to the container.
+     * `style`: Additional CSS style to apply to the container.
+    """
+    style_flat = f"max-height: {max_height}; overflow-y: auto;" + solara.util._flatten_style(style)
+    return Div(children=children, classes=classes, style=style_flat)
+
+
 @solara.component
 def Preformatted(text, **kwargs):
     return v.Html(tag="pre", children=[text], **kwargs)

solara/website/pages/documentation/components/layout/scrollable.py

@@ -0,0 +1,17 @@
+"""
+# Scrollable
+
+Use `Scrollable` to constrain long content to a vertically scrollable container.
+"""
+
+import solara
+from solara.website.utils import apidoc
+
+
+@solara.component
+def Page():
+    with solara.Scrollable(max_height="250px"):
+        solara.Markdown("\n\n".join(f"## Section {number}\n\nScrollable content." for number in range(1, 11)))
+
+
+__doc__ += apidoc(solara.Scrollable.f)  # type: ignore

tests/unit/scrollable_test.py

@@ -0,0 +1,28 @@
+import ipyvuetify as v
+
+import solara
+
+
+def test_scrollable_public_api():
+    child = solara.Text("Long content")
+    widget, rc = solara.render_fixed(
+        solara.Scrollable(
+            children=[child],
+            max_height="300px",
+            classes=["log-output"],
+            style={"border": "1px solid"},
+        ),
+        handle_error=False,
+    )
+    try:
+        assert isinstance(widget, v.Html)
+        assert widget.tag == "div"
+        assert len(widget.children) == 1
+        assert isinstance(widget.children[0], v.Html)
+        assert widget.children[0].children == ["Long content"]
+        assert widget.class_ == "log-output"
+        assert "max-height: 300px" in widget.style_
+        assert "overflow-y: auto" in widget.style_
+        assert "border:1px solid" in widget.style_
+    finally:
+        rc.close()