Group box

A GroupBox is a component that allow to group logically a collection of component inside a common frame. It is possible to display an always visible header and an optionally expandable content.

Node name : group-box

Composition

A GroupBox is composed of two parts :

Part name	Sub-Component	Required	Description
Header	group-box-header	false	The group box header, can contains for example a title and/or an icon.
Content	group-box-content	true	The group box content, can contains for example form components.

Attributes

Attribute	Type	Required	Default value	Description
expandable	bool	false	false	Value indicating whether the group box can be expanded by the user.
expanded	bool	false	true	Value indicating whether the group box is expanded.
header-padding	string	false	small	Defines the padding around the header part of the component. Value can be none, small, medium, large, or extralarge.
content-padding	string	false	small	Defines the padding around the content part of the component. Value can be none, small, medium, large, or extralarge.

Example

<group-box expandable="true" expanded="false">
  <group-box-header>
    <heading level="1">@Title</heading>
  </group-box-header>
  <group-box-content>
    <form-field property-name="CustomerName" />
    <form-field property-name="CustomerAddress" />
  </group-box-content>
</group-box>

In this example, a group-box will be displayed with a header containing the title of the current view. The content will not show at first (expanded="false"), but the user could click on the expand button to display it (expandable="true").

Note

By default, children nodes of the content will have their width expanded to fill their container. This behavior can be overridden by setting a layout:width directive on children nodes.

Using the "expanded" attribute

The expanded attribute supports two-way binding. This means that if the bound value is not a constant (true or false), the component will update the bound value when the user expands or collapses the group box via the toggle button.

However, if the bound value has only a getter and no setter, a runtime error will occur. If you want to only bind the initial value of the expanded attribute, you can define an empty setter like this:

// Setter is required because it is bound to the `expanded` attribute of the `group-box`.
return;