Portallayout"
Line 42: | Line 42: | ||
</source> | </source> | ||
− | = | + | = orient = |
{{versionSince|7.0.0}} | {{versionSince|7.0.0}} | ||
+ | Default: vertical | ||
+ | If you want the portallayout to be displayed as a row-based layout, you can specify <code>orient="horizontal"</code>. | ||
− | |||
− | |||
− | |||
− | |||
<source lang="xml" highlight="1"> | <source lang="xml" highlight="1"> |
Revision as of 04:15, 26 July 2023
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="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.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%">
<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>
Draggable Panel
<panel>
is draggable="true"
without explicitly specifying when it's inside a Portallayout. You can disable this by draggable="false"
.
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 |