Portallayout"
From Documentation
m (correct highlight (via JWB)) |
|||
(24 intermediate revisions by 10 users not shown) | |||
Line 3: | Line 3: | ||
= Portallayout = | = Portallayout = | ||
− | *Demonstration: [http://www.zkoss.org/zkdemo/ | + | *Demonstration: [http://www.zkoss.org/zkdemo/layout/portal_layout Portallayout] |
*Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc> | *Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</javadoc> | ||
+ | *Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Portallayout| Portallayout]] | ||
+ | *{{ZK EE}} | ||
= 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 <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 17: | Line 19: | ||
<source lang="xml" > | <source lang="xml" > | ||
− | <portallayout> | + | <portallayout height="100%"> |
− | <portalchildren width=" | + | <portalchildren width="50%"> |
− | <panel height="150px" title=" | + | <panel height="50%" title="Demo"> |
− | <panelchildren>.. | + | <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> | ||
+ | </source> | ||
+ | |||
+ | = 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''. | ||
+ | Default is ''vertical''. | ||
+ | |||
+ | For example, | ||
+ | |||
+ | <source lang="xml" highlight="1"> | ||
+ | <portallayout orient="horizontal"> | ||
+ | <portalchildren width="50%"> | ||
+ | <panel height="150px" title="Yahoo"> | ||
+ | <panelchildren> | ||
+ | <iframe width="100%" src="http://www.yahoo.com/"/> | ||
+ | </panelchildren> | ||
</panel> | </panel> | ||
− | <panel height="300px" title=" | + | <panel height="300px" title="Google"> |
− | <panelchildren>.. | + | <panelchildren> |
+ | <iframe width="100%" src="http://www.google.com/"/> | ||
+ | </panelchildren> | ||
</panel> | </panel> | ||
</portalchildren> | </portalchildren> | ||
− | <portalchildren width=" | + | <portalchildren width="50%"> |
− | <panel height="150px" title=" | + | <panel height="150px" title="ZK"> |
− | <panelchildren>.. | + | <panelchildren> |
+ | <iframe width="100%" src="http://www.zkoss.org/"/> | ||
+ | </panelchildren> | ||
</panel> | </panel> | ||
</portalchildren> | </portalchildren> | ||
Line 34: | Line 74: | ||
</source> | </source> | ||
− | =Supported | + | =Supported Events= |
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
|- | |- | ||
− | | | + | | <center>onPortalMove</center> |
− | | | + | | '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc> |
+ | 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]] | ||
=Supported Children= | =Supported Children= | ||
− | + | *[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren | Portalchildren]] | |
− | =Use | + | =Use Cases= |
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
− | | | + | | |
| | | | ||
| | | | ||
Line 58: | Line 104: | ||
=Version History= | =Version History= | ||
+ | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | | + | | 7.0.0 |
− | | | + | | October, 2013 |
− | | | + | | [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 |