Panel

/libs/granite/ui/components/coral/foundation/panel

The panel component where there are header/footer at the top/bottom and the main body in the middle that is maximized.

It has the following content structure:

granite:Panel
  1. granite:commonAttrs
  2. granite:renderCondition
marginboolean

Put vertical margin to the root element.

header

The component for header.

body
mandatory

The component for body.

The body will be maximized automatically by the panel, hence the given component doesn’t need to handle maximized feature at all, which can cause implementation conflict otherwise.

rail

The component for the rail.

By default the rail is hidden. To make it visible initially, you can set parentConfig/active property to true.

It also supports foundation-toggleable vocabulary, so it can be toggled accordingly. To do this, the rail component needs to implement foundation-toggleable. i.e. it needs to have .foundation-toggleable at its root element.

The rail by itself can be used as a generic container. You can also put multiple sub-panels under it, mostly by using RailPanel as the sub-panel.

The rail will be maximized automatically by the panel, hence the given component doesn’t need to handle maximized feature at all, which can cause implementation conflict otherwise.

footer

The component for footer.

granite:PanelRailParentconfig
activebooleanel

true to activate the rail initially.

Example

Classic Holy Grail Layout

+ mypanel
  - sling:resourceType = "granite/ui/components/coral/foundation/panel"
  + header
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + body
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + rail
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + footer
    - sling:resourceType = "granite/ui/components/coral/foundation/container"

Activating the Rail Initially

This example also shows multiple sub-panels in the rail.

+ mypanel
  - sling:resourceType = "granite/ui/components/coral/foundation/panel"
  + header
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + body
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
  + rail
    - sling:resourceType = "granite/ui/components/coral/foundation/container"
    + parentConfig
      - active = true
    + items
      + panel1
        - sling:resourceType = "granite/ui/components/coral/foundation/panel/railpanel"
        - active = true
      + panel2
        - sling:resourceType = "granite/ui/components/coral/foundation/panel/railpanel"
  + footer
    - sling:resourceType = "granite/ui/components/coral/foundation/container"

Components: