Merge pull request #1120 from zauberzeug/query-selector

Demo removing default padding with query selector

nicegui/elements/query.py

@@ -62,6 +62,8 @@ def query(selector: str) -> Query:
     To manipulate elements like the document body, you can use the `ui.query` function.
     With the query result you can add classes, styles, and attributes like with every other UI element.
     This can be useful for example to change the background color of the page (e.g. `ui.query('body').classes('bg-green')`).
+
+    :param selector: the CSS selector (e.g. "body", "#my-id", ".my-class", "div > p")
     """
     for element in get_client().elements.values():
         if isinstance(element, Query) and element._props['selector'] == selector:

website/more_documentation/query_documentation.py

@@ -23,3 +23,15 @@ def more() -> None:
         # ui.query('body').classes('bg-gradient-to-t from-blue-400 to-blue-100')
         # END OF DEMO
         globals.get_slot_stack()[-1].parent.classes('bg-gradient-to-t from-blue-400 to-blue-100')
+
+    @text_demo('Modify default page padding', '''
+        By default, NiceGUI provides a built-in padding around the content of the page.
+        You can modify it using the class selector `.nicegui-content`.
+    ''')
+    def remove_padding():
+        # ui.query('.nicegui-content').classes('p-0')
+        globals.get_slot_stack()[-1].parent.classes(remove='p-4')  # HIDE
+        # with ui.column().classes('h-screen w-full bg-gray-400 justify-between'):
+        with ui.column().classes('h-full w-full bg-gray-400 justify-between'):  # HIDE
+            ui.label('top left')
+            ui.label('bottom right').classes('self-end')