#676 review, additional splitter example

examples/splitter/main.py

@@ -1,32 +0,0 @@
-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

@@ -1,4 +1,4 @@
-from typing import Callable, Optional
+from typing import Callable, Optional, Tuple
 
 from .mixins.value_element import ValueElement
 
@@ -7,30 +7,27 @@ class Splitter(ValueElement):
     def __init__(self, *,
                  horizontal: Optional[bool] = False,
                  reverse: Optional[bool] = False,
-                 limits: Optional[list] = [0, 100],
+                 limits: Optional[Tuple[float, float]] = (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.
+        It provides three additional slots: `before`, `after`, and `separator`.
+        They can be used to place other elements inside.
 
+        :param horizontal: Whether to split horizontally instead of vertically
+        :param limits: Two numbers 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: Whether to apply the model size to the second panel instead of the first
+        :param on_change: callback which is invoked when the user releases the splitter
         """
         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
+
+        self.before = self.add_slot('before')
+        self.after = self.add_slot('after')
+        self.separator = self.add_slot('separator')

tests/test_splitter.py

@@ -5,15 +5,14 @@ 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.')
+        with splitter.before:
+            ui.label('Left hand side.')
+        with splitter.after:
+            ui.label('Right hand side.')
     ui.label().bind_text_from(splitter, 'value')
 
     screen.open('/')
+    screen.should_contain('Left hand side.')
+    screen.should_contain('Right hand side.')
     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')
+    # TODO: programmatically move splitter

website/more_documentation/splitter_documentation.py

@@ -1,9 +1,40 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
     with ui.splitter() as splitter:
-        with splitter.add_slot('before'):
+        with splitter.before:
             ui.label('This is some content on the left hand side.')
-        with splitter.add_slot('after'):
+        with splitter.after:
             ui.label('This is some content on the right hand side.')
+
+
+def more() -> None:
+    @text_demo('Advanced usage', '''
+        This demo shows all the slots and parameters including a tooltip, a custom separator, and a callback.
+    ''')
+    def advanced_usage() -> None:
+        with ui.splitter(horizontal=False, reverse=False, value=60,
+                         on_change=lambda e: ui.notify(e.value)) as splitter:
+            ui.tooltip('This is the default slot.').classes('bg-green')
+            with splitter.before:
+                ui.label('This is the left hand side.')
+            with splitter.after:
+                ui.label('This is the right hand side.')
+            with splitter.separator:
+                ui.icon('lightbulb').classes('text-green')
+
+        ui.number('Split value', format='%.1f').bind_value(splitter)
+
+    @text_demo('Image fun', '''
+        This demo shows how to use the splitter to display images side by side.
+    ''')
+    def image_fun() -> None:
+        with ui.splitter().classes('w-72') \
+                .props('before-class=overflow-hidden after-class=overflow-hidden') as splitter:
+            with splitter.before:
+                ui.image('https://cdn.quasar.dev/img/parallax1.jpg').classes('w-72')
+            with splitter.after:
+                ui.image('https://cdn.quasar.dev/img/parallax1-bw.jpg').classes('w-72 absolute-top-right')