Merge pull request #2225 from zauberzeug/space

Introduce ui.space

nicegui/elements/space.py

@@ -0,0 +1,13 @@
+from ..element import Element
+
+
+class Space(Element):
+
+    def __init__(self) -> None:
+        """Space
+
+        This element is based on Quasar's `QSpace <https://quasar.dev/vue-components/space>`_ component.
+
+        Its purpose is to simply fill all available space inside of a flexbox element.
+        """
+        super().__init__('q-space')

nicegui/ui.py

@@ -61,6 +61,7 @@ __all__ = [
     'select',
     'separator',
     'slider',
+    'space',
     'spinner',
     'splitter',
     'step',
@@ -166,6 +167,7 @@ from .elements.scroll_area import ScrollArea as scroll_area
 from .elements.select import Select as select
 from .elements.separator import Separator as separator
 from .elements.slider import Slider as slider
+from .elements.space import Space as space
 from .elements.spinner import Spinner as spinner
 from .elements.splitter import Splitter as splitter
 from .elements.stepper import Step as step

website/documentation/content/section_page_layout.py

@@ -3,8 +3,8 @@ from nicegui import ui
 from . import (card_documentation, carousel_documentation, column_documentation, context_menu_documentation,
                dialog_documentation, doc, expansion_documentation, grid_documentation, menu_documentation,
                notification_documentation, notify_documentation, pagination_documentation, row_documentation,
-               scroll_area_documentation, separator_documentation, splitter_documentation, stepper_documentation,
-               tabs_documentation, timeline_documentation, tooltip_documentation)
+               scroll_area_documentation, separator_documentation, space_documentation, splitter_documentation,
+               stepper_documentation, tabs_documentation, timeline_documentation, tooltip_documentation)
 
 doc.title('Page *Layout*')
 
@@ -63,6 +63,7 @@ def clear_containers_demo():
 doc.intro(expansion_documentation)
 doc.intro(scroll_area_documentation)
 doc.intro(separator_documentation)
+doc.intro(space_documentation)
 doc.intro(splitter_documentation)
 doc.intro(tabs_documentation)
 doc.intro(stepper_documentation)

website/documentation/content/space_documentation.py

@@ -0,0 +1,24 @@
+from nicegui import ui
+
+from . import doc
+
+
+@doc.demo(ui.space)
+def main_demo() -> None:
+    with ui.row().classes('w-full border'):
+        ui.label('Left')
+        ui.space()
+        ui.label('Right')
+
+
+@doc.demo('Vertical space', '''
+    This element can also be used to fill vertical space.
+''')
+def vertical_demo() -> None:
+    with ui.column().classes('h-32 border'):
+        ui.label('Top')
+        ui.space()
+        ui.label('Bottom')
+
+
+doc.reference(ui.space)