Structural Components
combinedBox
OVERVIEW
The combined box is used to organize the layout of your different parts.
Tip: Combined boxes can be embedded into other combined boxes for example to apply different CSS styles on specific parts of your pages.
ATTRIBUTES DETAILS
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: combinedBox visible or not | on / off | |
| keyBoardNav: keyboard Navigation activated or not | on / off | |
| showPanel: activates the panel header and footer of the combinedBox | on / off |
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| widthPercent: percentage of occupancy in the total width of the page or container | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the page or container | #IMPLIED | |
| autoSize: (Cf. Appendix C – UI brick positioning) | on / off | |
| hzAlignment: gives the horizontal alignment of the box in the page or container | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in the page or container | up / down / middle / distributed | |
| Declaration of the contained box(es) (check Component Usage Matrix in Appendix) | #REQUIRED |
Example:
XML Sample
<combinedBox cssName="combinedBoxRightPart" mode="on" showPanel="on" autosize="off" widthPercent="97" heightPercent="100">
<combinedBox …
<logoBox …/>
<logoBox …/>
</combinedBox>
<actionBox … />
</combinedBox>
VISUAL IDENTITY
Combined boxes are built using a structured panel that contains a header (with resources allowing to define the borders of the box), a body and a footer.
Mapping between CSS Classes and component structure