Merge pull request #1899 from adarshpunj/main

added new element: ui.pagination

nicegui/elements/pagination.py

@@ -0,0 +1,26 @@
+from typing import Any, Callable, Optional
+
+from nicegui.elements.mixins.disableable_element import DisableableElement
+from nicegui.elements.mixins.value_element import ValueElement
+
+
+class Pagination(ValueElement, DisableableElement):
+
+    def __init__(self, min: int, max: int, *, direction_links: bool = False,
+                 value: Optional[int] = ..., on_change: Optional[Callable[..., Any]] = None) -> None:
+        """Pagination
+
+        A pagination element wrapping Quasar's `QPagination <https://quasar.dev/vue-components/pagination>`_ component.
+
+        :param min: minimum page number
+        :param max: maximum page number
+        :param direction_links: whether to show first/last page links
+        :param value: initial page (defaults to `min` if no value is provided)
+        :param on_change: callback to be invoked when the value changes
+        """
+        super().__init__(tag='q-pagination', value=value, on_value_change=on_change)
+        self._props['min'] = min
+        self._props['max'] = max
+        self._props['direction-links'] = direction_links
+        if value is ...:
+            self.value = min

nicegui/ui.py

@@ -46,6 +46,7 @@
     'menu_item',
     'mermaid',
     'number',
+    'pagination',
     'plotly',
     'circular_progress',
     'linear_progress',
@@ -146,6 +147,7 @@
 from .elements.menu import MenuItem as menu_item
 from .elements.mermaid import Mermaid as mermaid
 from .elements.number import Number as number
+from .elements.pagination import Pagination as pagination
 from .elements.plotly import Plotly as plotly
 from .elements.progress import CircularProgress as circular_progress
 from .elements.progress import LinearProgress as linear_progress

tests/test_pagination.py

@@ -0,0 +1,20 @@
+from nicegui import ui
+
+from .screen import Screen
+
+
+def test_pagination(screen: Screen):
+    p = ui.pagination(1, 10, direction_links=True)
+    ui.label().bind_text_from(p, 'value', lambda v: f'Page {v}')
+
+    screen.open('/')
+    screen.should_contain('Page 1')
+
+    screen.click('7')
+    screen.should_contain('Page 7')
+
+    screen.click('keyboard_arrow_left')
+    screen.should_contain('Page 6')
+
+    screen.click('keyboard_arrow_right')
+    screen.should_contain('Page 7')

website/documentation.py

@@ -186,6 +186,7 @@ def add_face():
     load_demo(ui.stepper)
     load_demo(ui.timeline)
     load_demo(ui.carousel)
+    load_demo(ui.pagination)
     load_demo(ui.menu)
     load_demo(ui.context_menu)
 

website/more_documentation/pagination_documentation.py

@@ -0,0 +1,6 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    p = ui.pagination(1, 5, direction_links=True)
+    ui.label().bind_text_from(p, 'value', lambda v: f'Page {v}')