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
- granite:commonAttrs
- 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 totrue
.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"
-
granite:Panel
Components: