improved documentation for query selector

nicegui/elements/query.py

@@ -57,6 +57,12 @@ class Query(Element):
 
 
 def query(selector: str) -> Query:
+    """Query Selector
+
+    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 (eg. `ui.query('body').classes('bg-green')`).
+    """
     for element in get_client().elements.values():
         if isinstance(element, Query) and element._props['selector'] == selector:
             return element

website/documentation.py

@@ -234,17 +234,7 @@ def create_full() -> None:
         ui.button().props('icon=touch_app outline round').classes('shadow-lg')
         ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')
 
-    @text_demo('Query selector', '''
-        To manipulate elements like the document body, you can use the `ui.query` function.
-        You can add classes, styles, and attributes like with every other UI element.
-    ''')
-    def query_selector_demo():
-        # ui.button('Blue', on_click=lambda: ui.query('body').style('background-color: #ddeeff'))
-        # ui.button('Orange', on_click=lambda: ui.query('body').style('background-color: #ffeedd'))
-        # END OF DEMO
-        ui.button('Blue', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ddeeff'))
-        ui.button('Orange', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ffeedd'))
-
+    load_demo(ui.query)
     load_demo(ui.colors)
 
     heading('Action')

website/documentation_tools.py

@@ -98,13 +98,13 @@ class element_demo:
             return demo(browser_title=self.browser_title)(f)
 
 
-def load_demo(element_class: type) -> None:
-    name = pascal_to_snake(element_class.__name__)
+def load_demo(api: Union[type, Callable]) -> None:
+    name = pascal_to_snake(api.__name__)
     try:
         module = importlib.import_module(f'website.more_documentation.{name}_documentation')
     except ModuleNotFoundError:
         module = importlib.import_module(f'website.more_documentation.{name.replace("_", "")}_documentation')
-    element_demo(element_class)(getattr(module, 'main_demo'), more_link=name)
+    element_demo(api)(getattr(module, 'main_demo'), more_link=name)
 
 
 def is_method_or_property(cls: type, attribute_name: str) -> bool:

website/more_documentation/query_documentation.py

@@ -0,0 +1,12 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    def set_background(color: str) -> None:
+        ui.query('body').style(f'background-color: {color}')
+
+    # ui.button('Blue', on_click=lambda: set_background(#ddeeff'))
+    # ui.button('Orange', on_click=lambda: set_background(#ffeedd'))
+    # END OF DEMO
+    ui.button('Blue', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ddeeff'))
+    ui.button('Orange', on_click=lambda e: e.sender.parent_slot.parent.style('background-color: #ffeedd'))