Portallayout"
From Documentation
m (correct highlight (via JWB)) |
|||
(6 intermediate revisions by 2 users not shown) | |||
Line 10: | Line 10: | ||
= Employment/Purpose = | = Employment/Purpose = | ||
− | A < | + | A <code>portallayout</code> lays out a container which can have multiple columns, and each column might have any number panels placed vertically with different heights. <code>Portallayout</code> allows users to drag-and-drop a panel to change its location. |
− | When using < | + | When using <code>Portallayout</code>, you have to assign the width (either percentage or pixel) to each <code>Portalchildren</code>, or the result might depend on the browser, and not as expected. |
= Example = | = Example = | ||
Line 42: | Line 42: | ||
</source> | </source> | ||
− | = Row based layout = | + | = Row-based layout = |
− | + | {{versionSince|7.0.0}} | |
− | If you want the portallayout displayed as row based layout, you can specify the ''orient'' property to ''horizontal''. | + | If you want the portallayout displayed as row-based layout, you can specify the ''orient'' property to ''horizontal''. |
Default is ''vertical''. | Default is ''vertical''. | ||
For example, | For example, | ||
− | <source lang="xml" | + | <source lang="xml" highlight="1"> |
<portallayout orient="horizontal"> | <portallayout orient="horizontal"> | ||
<portalchildren width="50%"> | <portalchildren width="50%"> | ||
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 83: | Line 83: | ||
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc> | | '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc> | ||
Represents an event caused by a portal being moved. | Represents an event caused by a portal being moved. | ||
− | + | |- | |
+ | | <center>onPortalDrop</center> | ||
+ | | '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalDropEvent</javadoc> | ||
+ | Represents an event after a portal being dropped and before a portal being moved. (Since: 9.5.1) | ||
|} | |} | ||
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]] | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]] | ||
Line 92: | Line 95: | ||
=Use Cases= | =Use Cases= | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
Line 103: | Line 106: | ||
{{LastUpdated}} | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
Line 109: | Line 112: | ||
| October, 2013 | | October, 2013 | ||
| [http://tracker.zkoss.org/browse/ZK-1687 Portallayout supports row based orientation] | | [http://tracker.zkoss.org/browse/ZK-1687 Portallayout supports row based orientation] | ||
+ | |- | ||
+ | | 9.5.1 | ||
+ | | November, 2020 | ||
+ | | [https://tracker.zkoss.org/browse/ZK-4423 Kanban missing options to listen to portallayout onPortalMove without affecting the UI] | ||
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 08:49, 19 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 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 |