Portallayout
Portallayout
- Demonstration: Portallayout
- Java API: org.zkoss.zkmax.zul.Portallayout
- JavaScript API: zkmax.layout.Portallayout
Employment/Purpose
A portallayout lays out a container which can have multiple columns,
and each column might have any number panels placed vertically with
different heights. Portallayout allows users to drag-and-drop a panel
to change its location.
When using Portallayout, you have to assign the width (either
percentage or pixel) to each Portalchildren, or the result might
depend on the browser, and not as expected.
Example
<portallayout height="100%">
<portalchildren width="50%">
<panel height="50%" title="Calendar" border="normal">
<panelchildren>
<calendar/>
</panelchildren>
</panel>
<panel height="50%" title="Colorbox" border="normal">
<panelchildren>
<colorbox/>
</panelchildren>
</panel>
</portalchildren>
<portalchildren width="50%">
<panel height="100%" title="Editor" border="normal">
<panelchildren>
<tbeditor/>
</panelchildren>
</panel>
</portalchildren>
</portallayout>
orient
since 7.0
Default: vertical
If you want the portallayout to be displayed as a row-based layout, you
can specify orient="horizontal".
<portallayout orient="horizontal">
<portalchildren width="50%">
...
</portalchildren>
<portalchildren width="50%">
...
</portalchildren>
</portallayout>
Draggable Panel by Default
Name |
Event Type |
|---|---|
onPortalDrop |
since 9.5 Event: [org.zkoss.zkmax.ui.event.PortalDropEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/ui/event/PortalDropEvent.html) Represents an event after a portal is dropped and before a portal is moved. |
onPortalMove |
Event: [org.zkoss.zkmax.ui.event.PortalMoveEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/ui/event/PortalMoveEvent.html) Represents an event caused by a portal being moved. |