initial version of splitter element

examples/splitter/main.py

@@ -0,0 +1,32 @@
+from nicegui import ui
+
+"""
+More advanced example using all the slots and properties of the splitter
+including a tooltip, a custom separator, and a callback.
+
+Known Issues: Horizontal splitting `horizontal=False` displays OK visually but
+the movement of the splitter is not working.
+"""
+
+lhs = """
+Optio voluptate et nihil ex voluptatem hic magnam inventore tempore nihil et nihil ut reiciendis. Omnis fugit voluptas in sunt magnam in vel occaecati consequatur non dolorem ducimus. Eligendi cum aut dicta magni qui quia. Quisquam sed et qui modi maxime. Exercitationem fugiat qui cum soluta eum ut aperiam perspiciatis maiores enim porro rerum.
+Iure doloremque molestiae harum sapiente corrupti dolores omnis quaerat pariatur occaecati odio praesentium provident corrupti. Et ipsa qui velit aliquid delectus non. Aperiam aut veritatis ullam at nulla omnis a quidem enim dolorum quod temporibus sed sed. Ea ut consequuntur ipsam sunt unde est est quia deleniti amet et.
+Ex dolorem non pariatur cupiditate aliquid ipsam voluptatem doloremque voluptate. Repellendus sed ut deleniti non quo provident ducimus et. Molestiae velit earum nisi beatae consequatur amet sint quo occaecati pariatur ipsa et reprehenderit. Dolore reiciendis molestiae dolor laborum minus quisquam quia reiciendis officia id porro omnis reprehenderit excepturi aspernatur. Et ea rerum alias perspiciatis est sequi commodi nisi. In sit magni neque ex quibusdam et dolorem cumque tempore et quasi ut aspernatur.
+"""
+rhs = """
+Ipsum et quidem repudiandae hic ut soluta qui odit qui qui ad possimus. Est dolores saepe maxime omnis sed voluptatibus consequuntur aperiam sed iste. Non accusamus saepe sunt atque libero iure sed neque autem dicta omnis dolorem. Culpa maiores ad omnis magnam non sunt non.
+Eveniet aliquid quas harum iusto aut eum mollitia deserunt sint recusandae reprehenderit corrupti qui. Nobis quia eos iusto odio et repellat. Ea dolores qui ducimus neque et ut facere inventore aut dicta suscipit nobis est id. Illo omnis nemo ut voluptas quis sit neque. Soluta omnis ea quo accusamus culpa a est ipsa accusantium quia error incidunt dolores blanditiis.
+"""
+
+with ui.splitter(horizontal=False, reverse=False, value=60, on_change=lambda e: ui.notify(e.value)) as splitter:
+    ui.tooltip('Please drag left and right').classes('bg-green')  # default slot contents (optional)
+    with splitter.add_slot('before'):
+        ui.label(lhs)
+    with splitter.add_slot('after'):
+        ui.label(rhs)
+    with splitter.add_slot('separator'):  # separator slot contents (optional)
+        ui.icon('lightbulb').classes('text-green')
+
+ui.label().bind_text_from(splitter, 'value')
+
+ui.run(dark=True)

nicegui/elements/splitter.py

@@ -0,0 +1,36 @@
+from typing import Callable, Optional
+
+from .mixins.value_element import ValueElement
+
+
+class Splitter(ValueElement):
+    def __init__(self, *,
+                 horizontal: Optional[bool] = False,
+                 reverse: Optional[bool] = False,
+                 limits: Optional[list] = [0, 100],
+                 value: Optional[float] = 50,
+                 on_change: Optional[Callable] = None) -> None:
+        """Splitter
+
+        :param horizontal: Allows the splitter to split its two panels horizontally, instead of vertically
+        :param limits: An array of two values representing the minimum and maximum split size of the two panels
+        :param value: Size of the first panel (or second if using reverse)
+        :param reverse: Apply the model size to the second panel (by default it applies to the first)
+        :param on_change: callback which is invoked when the user releases the splitter
+
+        This element is based on Quasar's `Splitter <https://quasar.dev/vue-components/splitter>`_ component.
+
+        There are four slots which can contain content:
+
+            - before - Content of the panel on left/top of the splitter
+            - after - Content of the panel on right/bottom of the splitter
+            - default - Default slot in the devland unslotted content of the component; Suggestion: ui.tooltip, ui.menu
+            - separator - Content to be placed inside the separator; By default it is centered
+
+            Warning: The use of the **before** and **after** slots is required.
+
+        """
+        super().__init__(tag='q-splitter', value=value, on_value_change=on_change, throttle=0.05)
+        self._props['horizontal'] = horizontal
+        self._props['limits'] = limits
+        self._props['reverse'] = reverse

nicegui/ui.py

@@ -46,6 +46,7 @@ from .elements.select import Select as select
 from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
 from .elements.spinner import Spinner as spinner
+from .elements.splitter import Splitter as splitter
 from .elements.switch import Switch as switch
 from .elements.table import Table as table
 from .elements.tabs import Tab as tab

tests/test_splitter.py

@@ -0,0 +1,19 @@
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_splitter(screen: Screen):
+    with ui.splitter() as splitter:
+        with splitter.add_slot('before'):
+            ui.label('This is some content on the left hand side.')
+        with splitter.add_slot('after'):
+            ui.label('This is some content on the right hand side.')
+    ui.label().bind_text_from(splitter, 'value')
+
+    screen.open('/')
+    screen.should_contain('50')
+    screen.should_contain("This is some content on the left hand side.")
+    screen.should_contain("This is some content on the right hand side.")
+    # Not sure how to programmatically move splitter
+    # screen.should_contain('70')

website/documentation.py

@@ -163,6 +163,7 @@ def create_full(menu: ui.element) -> None:
         ui.button('Clear', on_click=container.clear)
 
     load_demo(ui.expansion)
+    load_demo(ui.splitter)
 
     @text_demo('Tabs', '''
         The elements `ui.tabs`, `ui.tab`, `ui.tab_panels`, and `ui.tab_panel` resemble

website/more_documentation/splitter_documentation.py

@@ -0,0 +1,9 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    with ui.splitter() as splitter:
+        with splitter.add_slot('before'):
+            ui.label('This is some content on the left hand side.')
+        with splitter.add_slot('after'):
+            ui.label('This is some content on the right hand side.')