add demo for tree expansion/collapse

website/more_documentation/tree_documentation.py

@@ -1,3 +1,5 @@
+from typing import List
+
 from nicegui import ui
 
 from ..documentation_tools import text_demo
@@ -33,3 +35,22 @@ def tree_with_custom_header_and_body():
  tree.add_slot('default-body', '''
  <span :props="props">Description: "{{ props.node.description }}"</span>
  ''')
+
+ @text_demo('Expand programmatically', '''
+ The tree can be expanded programmatically by modifying the `expanded` prop.
+ ''')
+ def expand_programmatically():
+ def expand(node_ids: List[str]) -> None:
+ t._props['expanded'] = node_ids
+ t.update()
+
+ with ui.row():
+ ui.button('all', on_click=lambda: expand(['A', 'B']))
+ ui.button('A', on_click=lambda: expand(['A']))
+ ui.button('B', on_click=lambda: expand(['B']))
+ ui.button('close', on_click=lambda: expand([]))
+
+ t = ui.tree([
+ {'id': 'A', 'children': [{'id': 'A1'}, {'id': 'A2'}]},
+ {'id': 'B', 'children': [{'id': 'B1'}, {'id': 'B2'}]},
+ ], label_key='id')