Portallayout"
From Documentation
m ((via JWB)) |
|||
Line 76: | Line 76: | ||
=Supported Events= | =Supported Events= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
Line 95: | Line 95: | ||
=Use Cases= | =Use Cases= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
Line 106: | Line 106: | ||
{{LastUpdated}} | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- |
Revision as of 13:13, 7 January 2022
Portallayout
- Demonstration: Portallayout
- Java API: Portallayout
- JavaScript API: Portallayout
- Style Guide: Portallayout
- Available for ZK:
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="Demo">
<panelchildren>
<iframe height="100%" width="100%" src="https://www.zkoss.org/zkdemo"/>
</panelchildren>
</panel>
<panel height="50%" title="Doc">
<panelchildren>
<iframe height="100%" width="100%" src="https://www.zkoss.org/documentation"/>
</panelchildren>
</panel>
</portalchildren>
<portalchildren width="50%">
<panel height="100%" title="ZK">
<panelchildren>
<iframe height="100%" width="100%" src="https://www.zkoss.org/"/>
</panelchildren>
</panel>
</portalchildren>
</portallayout>
Row-based layout
Since ZK 7.0.0
If you want the portallayout displayed as row-based layout, you can specify the orient property to horizontal.
Default is vertical.
For example,
<portallayout orient="horizontal">
<portalchildren width="50%">
<panel height="150px" title="Yahoo">
<panelchildren>
<iframe width="100%" src="http://www.yahoo.com/"/>
</panelchildren>
</panel>
<panel height="300px" title="Google">
<panelchildren>
<iframe width="100%" src="http://www.google.com/"/>
</panelchildren>
</panel>
</portalchildren>
<portalchildren width="50%">
<panel height="150px" title="ZK">
<panelchildren>
<iframe width="100%" src="http://www.zkoss.org/"/>
</panelchildren>
</panel>
</portalchildren>
</portallayout>
Supported Events
Event: PortalMoveEvent
Represents an event caused by a portal being moved. | |
Event: PortalDropEvent
Represents an event after a portal being dropped and before a portal being moved. (Since: 9.5.1) |
- Inherited Supported Events: XulElement
Supported Children
* Portalchildren
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|
7.0.0 | October, 2013 | Portallayout supports row based orientation |
9.5.1 | November, 2020 | Kanban missing options to listen to portallayout onPortalMove without affecting the UI |