#308 update example, add "bordered" and "elevated" to the public API

nicegui/page_layout.py

@@ -20,15 +20,23 @@ PageStickyPositions = Literal[
 
 class Header(ValueElement):
 
-    def __init__(self, *, value: bool = True, fixed: bool = True) -> None:
+    def __init__(self, *,
+                 value: bool = True,
+                 fixed: bool = True,
+                 bordered: bool = False,
+                 elevated: bool = False) -> None:
         '''Header
 
         :param value: whether the header is already opened (default: `True`)
         :param fixed: whether the header should be fixed to the top of the page (default: `True`)
+        :param bordered: whether the header should have a border (default: `False`)
+        :param elevated: whether the header should have a shadow (default: `False`)
         '''
         with globals.get_client().layout:
             super().__init__(tag='q-header', value=value, on_value_change=None)
         self.classes('q-pa-md row items-start gap-4')
+        self._props['bordered'] = bordered
+        self._props['elevated'] = elevated
         code = list(self.client.layout._props['view'])
         code[1] = 'H' if fixed else 'h'
         self.client.layout._props['view'] = ''.join(code)
@@ -36,13 +44,21 @@ class Header(ValueElement):
 
 class Drawer(ValueElement):
 
-    def __init__(self, side: DrawerSides, *,
-                 value: bool = True, fixed: bool = True, top_corner: bool = False, bottom_corner: bool = False) -> None:
+    def __init__(self,
+                 side: DrawerSides, *,
+                 value: bool = True,
+                 fixed: bool = True,
+                 bordered: bool = False,
+                 elevated: bool = False,
+                 top_corner: bool = False,
+                 bottom_corner: bool = False) -> None:
         '''Drawer
 
         :param side: side of the page where the drawer should be placed (`left` or `right`)
         :param value: whether the drawer is already opened (default: `True`)
         :param fixed: whether the drawer is fixed or scrolls with the content (default: `True`)
+        :param bordered: whether the drawer should have a border (default: `False`)
+        :param elevated: whether the drawer should have a shadow (default: `False`)
         :param top_corner: whether the drawer expands into the top corner (default: `False`)
         :param bottom_corner: whether the drawer expands into the bottom corner (default: `False`)
         '''
@@ -50,6 +66,8 @@ class Drawer(ValueElement):
             super().__init__(tag='q-drawer', value=value, on_value_change=None)
         self._props['show-if-above'] = True
         self._props['side'] = side
+        self._props['bordered'] = bordered
+        self._props['elevated'] = elevated
         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'
@@ -57,46 +75,92 @@ class Drawer(ValueElement):
         code[8 if side == 'left' else 10] = side[0].lower() if bottom_corner else 'f'
         self.client.layout._props['view'] = ''.join(code)
 
+    def toggle(self) -> None:
+        '''Toggle the drawer'''
+        self.value = not self.value
+
+    def open(self) -> None:
+        '''Open the drawer'''
+        self.value = True
+
+    def close(self) -> None:
+        '''Close the drawer'''
+        self.value = False
+
 
 class LeftDrawer(Drawer):
 
     def __init__(self, *,
-                 value: bool = True, fixed: bool = True, top_corner: bool = False, bottom_corner: bool = False) -> None:
+                 value: bool = True,
+                 fixed: bool = True,
+                 bordered: bool = False,
+                 elevated: bool = False,
+                 top_corner: bool = False,
+                 bottom_corner: bool = False) -> None:
         '''Left drawer
 
         :param value: whether the drawer is already opened (default: `True`)
         :param fixed: whether the drawer is fixed or scrolls with the content (default: `True`)
+        :param bordered: whether the drawer should have a border (default: `False`)
+        :param elevated: whether the drawer should have a shadow (default: `False`)
         :param top_corner: whether the drawer expands into the top corner (default: `False`)
         :param bottom_corner: whether the drawer expands into the bottom corner (default: `False`)
         '''
-        super().__init__('left', value=value, fixed=fixed, top_corner=top_corner, bottom_corner=bottom_corner)
+        super().__init__('left',
+                         value=value,
+                         fixed=fixed,
+                         bordered=bordered,
+                         elevated=elevated,
+                         top_corner=top_corner,
+                         bottom_corner=bottom_corner)
 
 
 class RightDrawer(Drawer):
 
     def __init__(self, *,
-                 value: bool = True, fixed: bool = True, top_corner: bool = False, bottom_corner: bool = False) -> None:
+                 value: bool = True,
+                 fixed: bool = True,
+                 bordered: bool = False,
+                 elevated: bool = False,
+                 top_corner: bool = False,
+                 bottom_corner: bool = False) -> None:
         '''Right drawer
 
         :param value: whether the drawer is already opened (default: `True`)
         :param fixed: whether the drawer is fixed or scrolls with the content (default: `True`)
+        :param bordered: whether the drawer should have a border (default: `False`)
+        :param elevated: whether the drawer should have a shadow (default: `False`)
         :param top_corner: whether the drawer expands into the top corner (default: `False`)
         :param bottom_corner: whether the drawer expands into the bottom corner (default: `False`)
         '''
-        super().__init__('right', value=value, fixed=fixed, top_corner=top_corner, bottom_corner=bottom_corner)
+        super().__init__('right',
+                         value=value,
+                         fixed=fixed,
+                         bordered=bordered,
+                         elevated=elevated,
+                         top_corner=top_corner,
+                         bottom_corner=bottom_corner)
 
 
 class Footer(ValueElement):
 
-    def __init__(self, *, value: bool = True, fixed: bool = True) -> None:
+    def __init__(self, *,
+                 value: bool = True,
+                 fixed: bool = True,
+                 bordered: bool = False,
+                 elevated: bool = False) -> None:
         '''Footer
 
         :param value: whether the footer is already opened (default: `True`)
         :param fixed: whether the footer is fixed or scrolls with the content (default: `True`)
+        :param bordered: whether the footer should have a border (default: `False`)
+        :param elevated: whether the footer should have a shadow (default: `False`)
         '''
         with globals.get_client().layout:
             super().__init__(tag='q-footer', value=value, on_value_change=None)
         self.classes('q-pa-md row items-start gap-4')
+        self._props['bordered'] = bordered
+        self._props['elevated'] = elevated
         code = list(self.client.layout._props['view'])
         code[9] = 'F' if fixed else 'f'
         self.client.layout._props['view'] = ''.join(code)

website/reference.py

@@ -684,8 +684,7 @@ Also it is possible to do async stuff while the user already sees some content.
 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 like
-`elevated`, `bordered` and many more.
+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.
 ''')
@@ -694,11 +693,12 @@ See <https://quasar.dev/layout/page-sticky> for more information.
         async def page_layout():
             ui.label('CONTENT')
             [ui.label(f'Line {i}') for i in range(100)]
-            with ui.header().style('background-color: #3874c8').props('elevated'):
+            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()).props('flat color=white icon=menu')
             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'):
+            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')