update page layout

api_docs_and_examples.py

@@ -733,7 +733,7 @@ See <https://quasar.dev/layout/header-and-footer> and <https://quasar.dev/layout
 `elevated`, `bordered` and many more.
 With `ui.page_sticky` you can place an element "sticky" on the screen.
 See <https://quasar.dev/layout/page-sticky> for more information.
-    ''')
+    ''', skip=False)
     def page_layout_example():
         @ui.page('/page_layout')
         async def page_layout():

nicegui/client.py

@@ -7,7 +7,7 @@ from typing import Any, Dict, List, Optional
 
 from fastapi.responses import HTMLResponse
 
-from . import globals, ui, vue
+from . import globals, vue
 from .element import Element
 from .slot import Slot
 from .task_logger import create_task
@@ -32,7 +32,9 @@ class Client:
         self.environ: Optional[Dict[str, Any]] = None
 
         globals.client_stack.append(self)
-        self.content = ui.column().classes('q-ma-md')
+        with Element('q-layout').props('view="HHH LpR FFF"') as self.layout:
+            with Element('q-page-container'):
+                self.content = Element('div').classes('q-pa-md column items-start gap-4')
         globals.client_stack.pop()
 
         self.waiting_javascript_commands: Dict[str, str] = {}

nicegui/page_layout.py

@@ -1,42 +1,29 @@
-import justpy as jp
+from .element import Element
 
-from .elements.group import Group
-from .page import find_parent_page
 
-
-class Header(Group):
+class Header(Element):
 
     def __init__(self, fixed: bool = True) -> None:
-        view = jp.QHeader(classes='q-pa-md row items-start gap-4', temp=False)
-        super().__init__(view)
-        code = list(find_parent_page().layout.view)
+        super().__init__('q-header')
+        self.classes('q-pa-md row items-start gap-4')
+        code = list(self.client.layout._props['view'])
         code[1] = 'H' if fixed else 'h'
-        find_parent_page().layout.view = ''.join(code)
+        self.client.layout._props['view'] = ''.join(code)
 
 
-class Drawer(Group):
+class Drawer(Element):
 
     def __init__(self, side: str, *, fixed: bool = True, top_corner: bool = False, bottom_corner: bool = False) -> None:
         assert side in ['left', 'right']
-        view = jp.QDrawer(side=side, content_class='q-pa-md', content_style='', temp=False)
-        super().__init__(view)
-        code = list(find_parent_page().layout.view)
+        super().__init__('q-drawer')
+        self._props['show-if-above'] = True
+        self._props['side'] = side
+        self._classes = ['q-pa-md']
+        code = list(self.client.layout._props['view'])
         code[0 if side == 'left' else 2] = side[0].lower() if top_corner else 'h'
         code[4 if side == 'left' else 6] = side[0].upper() if fixed else side[0].lower()
         code[8 if side == 'left' else 10] = side[0].lower() if bottom_corner else 'f'
-        find_parent_page().layout.view = ''.join(code)
-
-    def classes(self, add: str = '', *, replace: str = ''):
-        if replace:
-            self.view.content_class = replace
-        self.view.content_class += f' {add}'
-        return self
-
-    def style(self, add: str = '', *, replace: str = ''):
-        if replace:
-            self.view.content_style = replace
-        self.view.content_style += f';{add}'
-        return self
+        self.client.layout._props['view'] = ''.join(code)
 
 
 class LeftDrawer(Drawer):
@@ -51,18 +38,17 @@ class RightDrawer(Drawer):
         super().__init__('right', fixed=fixed, top_corner=top_corner, bottom_corner=bottom_corner)
 
 
-class Footer(Group):
+class Footer(Element):
 
     def __init__(self, fixed: bool = True) -> None:
-        view = jp.QFooter(classes='q-pa-md row items-start gap-4', temp=False)
-        super().__init__(view)
-        code = list(find_parent_page().layout.view)
-        code[1] = 'F' if fixed else 'f'
-        find_parent_page().layout.view = ''.join(code)
+        super().__init__('q-footer')
+        self.classes('q-pa-md row items-start gap-4')
+        code = list(self.client.layout._props['view'])
+        code[9] = 'F' if fixed else 'f'
+        self.client.layout._props['view'] = ''.join(code)
 
 
-class PageSticky(Group):
+class PageSticky(Element):
 
     def __init__(self) -> None:
-        view = jp.QPageSticky(temp=False)
-        super().__init__(view)
+        super().__init__('q-page-sticky')

nicegui/ui.py

@@ -48,4 +48,9 @@ from .functions.timer import Timer as timer
 from .functions.update import update
 from .lifecycle import on_connect, on_disconnect, on_shutdown, on_startup
 from .page import page
+from .page_layout import Footer as footer
+from .page_layout import Header as header
+from .page_layout import LeftDrawer as left_drawer
+from .page_layout import PageSticky as page_sticky
+from .page_layout import RightDrawer as right_drawer
 from .run import run