Merge pull request #2281 from evt-it/expansion_changes

Additional ui.expansion options

nicegui/elements/expansion.py

@@ -9,7 +9,9 @@ class Expansion(TextElement, ValueElement, DisableableElement):
 
     def __init__(self,
                  text: str = '', *,
+                 caption: Optional[str] = None,
                  icon: Optional[str] = None,
+                 group: Optional[str] = None,
                  value: bool = False,
                  on_value_change: Optional[Callable[..., Any]] = None
                  ) -> None:
@@ -18,11 +20,17 @@ class Expansion(TextElement, ValueElement, DisableableElement):
         Provides an expandable container based on Quasar's `QExpansionItem <https://quasar.dev/vue-components/expansion-item>`_ component.
 
         :param text: title text
+        :param caption: optional caption (or sub-label) text
         :param icon: optional icon (default: None)
+        :param group: optional group name for coordinated open/close state within the group a.k.a. 'accordion mode'
         :param value: whether the expansion should be opened on creation (default: `False`)
         :param on_value_change: callback to execute when value changes
         """
         super().__init__(tag='q-expansion-item', text=text, value=value, on_value_change=on_value_change)
+        if caption is not None:
+            self._props['caption'] = caption
+        if group is not None:
+            self._props['group'] = group
         self._props['icon'] = icon
         self._classes.append('nicegui-expansion')
 

tests/test_expansion.py

@@ -17,3 +17,52 @@ def test_open_close_expansion(screen: Screen):
     screen.click('Close')
     screen.wait(0.5)
     screen.should_not_contain('Content')
+
+def test_caption(screen: Screen):
+    with ui.expansion('Expansion', caption='Caption') as e:
+        ui.label('Content')
+
+    screen.open('/')
+    screen.should_contain('Expansion')
+    screen.should_contain('Caption')
+    screen.should_not_contain('Content')
+    
+    screen.click('Expansion')
+    screen.wait(0.5)
+    screen.should_contain('Expansion')
+    screen.should_contain('Caption')
+    screen.should_contain('Content')
+
+def test_group(screen: Screen):
+    with ui.expansion('Expansion A', group='group') as a:
+        ui.label('Content A')
+    with ui.expansion('Expansion B', group='group') as b:
+        ui.label('Content B')
+    with ui.expansion('Expansion C', group='group') as c:
+        ui.label('Content C')
+
+    screen.open('/')
+    screen.should_contain('Expansion A')
+    screen.should_contain('Expansion B')
+    screen.should_contain('Expansion C')
+    screen.should_not_contain('Content A')
+    screen.should_not_contain('Content B')
+    screen.should_not_contain('Content C')
+
+    screen.click('Expansion A')
+    screen.wait(0.5)
+    screen.should_contain('Content A')
+    screen.should_not_contain('Content B')
+    screen.should_not_contain('Content C')
+
+    screen.click('Expansion B')
+    screen.wait(0.5)
+    screen.should_not_contain('Content A')
+    screen.should_contain('Content B')
+    screen.should_not_contain('Content C')
+
+    screen.click('Expansion C')
+    screen.wait(0.5)
+    screen.should_not_contain('Content A')
+    screen.should_not_contain('Content B')
+    screen.should_contain('Content C')

website/documentation/content/expansion_documentation.py

@@ -19,4 +19,24 @@ def expansion_with_custom_header():
         ui.label('What a nice GUI!')
 
 
+@doc.demo('Expansion with Custom Caption', '''
+    A caption, or sub-label, can be added below the title.
+''')
+def expansion_with_caption():
+    with ui.expansion('Expand!', caption='Expansion Caption').classes('w-full'):
+        ui.label('inside the expansion')
+
+
+@doc.demo('Expansion with Grouping', '''
+    An expansion group can be defined to enable coordinated open/close states a.k.a. 'accordion mode'.
+''')
+def expansion_with_grouping():
+    with ui.expansion(text='Expand One!', group='group'):
+        ui.label('inside expansion one')
+    with ui.expansion(text='Expand Two!', group='group'):
+        ui.label('inside expansion two')
+    with ui.expansion(text='Expand Three!', group='group'):
+        ui.label('inside expansion three')
+
+
 doc.reference(ui.expansion)