#439 allow adding additional examples for UI elements

main.py

@@ -1,4 +1,5 @@
 #!/usr/bin/env python3
+import importlib
 
 if True:
     # increasing max decode packets to be able to transfer images
@@ -20,7 +21,7 @@ from nicegui import ui
 from website import demo_card, reference, svg
 from website.example import bash_window, browser_window, python_window
 from website.star import add_star
-from website.style import example_link, features, heading, link_target, section_heading, subtitle, title
+from website.style import example_link, features, heading, link_target, section_heading, side_menu, subtitle, title
 
 prometheus.start_monitor(app)
 
@@ -290,8 +291,7 @@ The command searches for `main.py` in in your current directory and makes the ap
 def reference_page():
     add_head_html()
     add_header()
-    menu = ui.left_drawer() \
-        .classes('column no-wrap gap-1 bg-[#eee] mt-[-20px] px-8 py-20').style('height: calc(100% + 20px) !important')
+    menu = side_menu()
     ui.add_head_html('<style>html {scroll-behavior: auto;}</style>')
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1250px] mx-auto'):
         section_heading('Documentation and Examples', '*API* Reference')
@@ -302,4 +302,16 @@ def reference_page():
         reference.create_full(menu)
 
 
+@ui.page('/reference/{name}')
+def reference_page_more(name: str):
+    add_head_html()
+    add_header()
+    with side_menu():
+        ui.markdown('[← back](/reference)').classes('bold-links')
+    with ui.column().classes('w-full p-8 lg:p-16 max-w-[1250px] mx-auto'):
+        section_heading('More Examples', f'ui.*{name}*')
+        module = importlib.import_module(f'website.more_reference.{name}')
+        getattr(module, 'more_examples')()
+
+
 ui.run(uvicorn_reload_includes='*.py, *.css, *.html')

website/example.py

@@ -50,11 +50,13 @@ class example:
                  content: Union[Callable, type, str],
                  menu: Optional[ui.drawer],
                  browser_title: Optional[str] = None,
-                 immediate: bool = False) -> None:
+                 immediate: bool = False,
+                 more: Optional[str] = None) -> None:
         self.content = content
         self.menu = menu
         self.browser_title = browser_title
         self.immediate = immediate
+        self.more = more
 
     def __call__(self, f: Callable) -> Callable:
         with ui.column().classes('w-full mb-8'):
@@ -88,6 +90,9 @@ class example:
                     else:
                         intersection_observer(on_intersection=f)
 
+            if self.more:
+                ui.markdown(f'[More examples...](reference/{self.more})').classes('bold-links')
+
         return f
 
 

website/more_reference/table.py

@@ -0,0 +1,48 @@
+from nicegui import ui
+
+from ..example import example
+
+
+def more_examples():
+    @example('''#### Table with expandable rows
+
+Scoped slots can be used to insert buttons that toggle the expand state of a table row.
+See the [Quasar documentation](https://quasar.dev/vue-components/table#expanding-rows) for more information.
+''', None)
+    def table_with_expandable_rows():
+        columns = [
+            {'name': 'name', 'label': 'Name', 'field': 'name'},
+            {'name': 'age', 'label': 'Age', 'field': 'age'},
+        ]
+        rows = [
+            {'name': 'Alice', 'age': 18},
+            {'name': 'Bob', 'age': 21},
+            {'name': 'Carol'},
+        ]
+
+        with ui.table(columns=columns, rows=rows, row_key='name').classes('w-72') as table:
+            table.add_slot('header', r'''
+                <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                        {{ col.label }}
+                    </q-th>
+                </q-tr>
+            ''')
+            table.add_slot('body', r'''
+                <q-tr :props="props">
+                    <q-td auto-width>
+                        <q-btn size="sm" color="accent" round dense
+                            @click="props.expand = !props.expand"
+                            :icon="props.expand ? 'remove' : 'add'" />
+                    </q-td>
+                    <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                        {{ col.value }}
+                    </q-td>
+                </q-tr>
+                <q-tr v-show="props.expand" :props="props">
+                    <q-td colspan="100%">
+                        <div class="text-left">This is {{ props.row.name }}.</div>
+                    </q-td>
+                </q-tr>
+            ''')

website/reference.py

@@ -292,7 +292,7 @@ To overlay an SVG, make the `viewBox` exactly the size of the image and provide
         ui.button('Update', on_click=update)
         ui.button('Select all', on_click=lambda: grid.call_api_method('selectAll'))
 
-    @example(ui.table, menu)
+    @example(ui.table, menu, more='table')
     def table_example():
         columns = [
             {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},

website/style.py

@@ -45,3 +45,9 @@ def features(icon: str, title: str, items: List[str]) -> None:
         ui.label(title).classes('font-bold mb-3')
         for item in items:
             ui.markdown(f'- {item}').classes('bold-links arrow-links')
+
+
+def side_menu() -> ui.left_drawer:
+    return ui.left_drawer() \
+        .classes('column no-wrap gap-1 bg-[#eee] mt-[-20px] px-8 py-20') \
+        .style('height: calc(100% + 20px) !important')