add reference for page layout elements

website/documentation/content/page_layout_documentation.py

@@ -0,0 +1,36 @@
+from nicegui import ui
+
+from . import doc
+
+
+@doc.demo('Page Layout', '''
+    With `ui.header`, `ui.footer`, `ui.left_drawer` and `ui.right_drawer` you can add additional layout elements to a page.
+    The `fixed` argument controls whether the element should scroll or stay fixed on the screen.
+    The `top_corner` and `bottom_corner` arguments indicate whether a drawer should expand to the top or bottom of the page.
+    See <https://quasar.dev/layout/header-and-footer> and <https://quasar.dev/layout/drawer> for more information about possible props.
+    With `ui.page_sticky` you can place an element "sticky" on the screen.
+    See <https://quasar.dev/layout/page-sticky> for more information.
+''')
+def page_layout_demo():
+    @ui.page('/page_layout')
+    def page_layout():
+        ui.label('CONTENT')
+        [ui.label(f'Line {i}') for i in range(100)]
+        with ui.header(elevated=True).style('background-color: #3874c8').classes('items-center justify-between'):
+            ui.label('HEADER')
+            ui.button(on_click=lambda: right_drawer.toggle(), icon='menu').props('flat color=white')
+        with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4'):
+            ui.label('LEFT DRAWER')
+        with ui.right_drawer(fixed=False).style('background-color: #ebf1fa').props('bordered') as right_drawer:
+            ui.label('RIGHT DRAWER')
+        with ui.footer().style('background-color: #3874c8'):
+            ui.label('FOOTER')
+
+    ui.link('show page with fancy layout', page_layout)
+
+
+doc.reference(ui.header, title='Header')
+doc.reference(ui.left_drawer, title='Left Drawer')
+doc.reference(ui.right_drawer, title='Right Drawer')
+doc.reference(ui.footer, title='Footer')
+doc.reference(ui.page_sticky, title='Page Sticky')

website/documentation/content/section_pages_routing.py

@@ -2,7 +2,8 @@ import uuid
 
 from nicegui import app, ui
 
-from . import doc, download_documentation, open_documentation, page_documentation, page_title_documentation
+from . import (doc, download_documentation, open_documentation, page_documentation, page_layout_documentation,
+               page_title_documentation)
 
 CONSTANT_UUID = str(uuid.uuid4())
 
@@ -35,30 +36,7 @@ def auto_index_page():
     ui.link('private page', private_page)
 
 
-@doc.demo('Page Layout', '''
-    With `ui.header`, `ui.footer`, `ui.left_drawer` and `ui.right_drawer` you can add additional layout elements to a page.
-    The `fixed` argument controls whether the element should scroll or stay fixed on the screen.
-    The `top_corner` and `bottom_corner` arguments indicate whether a drawer should expand to the top or bottom of the page.
-    See <https://quasar.dev/layout/header-and-footer> and <https://quasar.dev/layout/drawer> for more information about possible props.
-    With `ui.page_sticky` you can place an element "sticky" on the screen.
-    See <https://quasar.dev/layout/page-sticky> for more information.
-''')
-def page_layout_demo():
-    @ui.page('/page_layout')
-    def page_layout():
-        ui.label('CONTENT')
-        [ui.label(f'Line {i}') for i in range(100)]
-        with ui.header(elevated=True).style('background-color: #3874c8').classes('items-center justify-between'):
-            ui.label('HEADER')
-            ui.button(on_click=lambda: right_drawer.toggle(), icon='menu').props('flat color=white')
-        with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4'):
-            ui.label('LEFT DRAWER')
-        with ui.right_drawer(fixed=False).style('background-color: #ebf1fa').props('bordered') as right_drawer:
-            ui.label('RIGHT DRAWER')
-        with ui.footer().style('background-color: #3874c8'):
-            ui.label('FOOTER')
-
-    ui.link('show page with fancy layout', page_layout)
+doc.intro(page_layout_documentation)
 
 
 @doc.demo('Parameter injection', '''