Collapsible and Expandable Panels
Collapsible and Expandable Panels
Technologies / User Interface Add-Ins / Assemblies with Multiple Panels / Find-Manage with Categories
If you are designing a view or a dialog with many panels, you can let users expand or collapse individual panels. In the below image, all panels are expanded:
In this image, the first two panels are collapsed.
Put all collapsible panels into the same layout region. If the total height of panels exceeds the height of the layout region, the region displays a vertical scroll bar.
By default, panels cannot be collapsed or expanded. To make a panel collapsible, specify the initial expanded/collapsed state for each panel using the
collapsed
property:
<!-- First panel is not collapsible (default). -->
<panel type="form" ... layoutRegion="tools">
<title>Summary</title>
...
</panel>
<!-- Second panel is collapsible, and expanded initially. -->
<panel type="grid" ... layoutRegion="tools"
collapsed="false"
>
<title>Select Floor</title>
...
</panel>
<!-- Third panel is collapsible, and collapsed initially. -->
<panel type="grid" ... layoutRegion="tools" collapsed="true">
<title>Select Department</title>
...
</panel>
In order to use
collapsed="false"
or
collapsed="true"
, there needs to be a panel title or panel-level action. Either the title or the action will build the panel header which then will have the collapsible "arrow" inserted. If neither one exists, the
collapsed
attribute will not work. Therefore, if you wish to use this feature without a panel title or an action, you must have a blank title:
<title> </title>
.
To expand or collapse a panel dynamically, use the
Panel.setCollapsed()
Java Script API method:
// collapse the panel
this.selectDepartment.setCollapsed(true);
// expand the panel
this.selectRoomType.setCollapsed(false);