Rowlayout"

From Documentation
m ((via JWB))
 
(4 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
= Rowlayout =
 
= Rowlayout =
  
−
*Demonstration: [http://www.zkoss.org/zkdemo/layout/portal_layout Portallayout]
+
*Java API: <javadoc>org.zkoss.zkmax.zul.RowLayout</javadoc>
−
*Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc>
+
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.RowLayout</javadoc>
−
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</javadoc>
+
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification | RowLayout]]
−
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Portallayout| Portallayout]]
 
 
*{{ZK EE}}
 
*{{ZK EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
−
A <tt>portallayout</tt> lays out a container which can have multiple columns, and each column might have any number panels placed vertically with different heights. <tt>Portallayout</tt> allows users to drag-and-drop a panel to change its location.
+
A <code>rowlayout</code> lays out a container which can have multiple columns, it offers a 12-column grid out of the box. You can simply chooses the number of columns to occupy for each major content area, and may also skip columns for extra space without inserting space-inducing elements.  
  
−
When using <tt>Portallayout</tt>, you have to assign the width (either percentage or pixel) to each <tt>Portalchildren</tt>, or the result might depend on the browser, and not as expected.
+
The following diagram illustrates the rowlayout/rowchildren components and their various configurable parameters.
 +
 
 +
[[Image:ZKComRef_Rowlayout.PNG|600px]]
  
 
= Example =
 
= Example =
−
[[Image:ZKComRef_Portallayout_Example.PNG]]
 
  
 +
Using rowlayout component is simple. First, use rowlayout to divide the horizontal space of its parent container into a number of columns. You can also optionally specify the column/spacing ratio. The default number of columns is 12, and the default column/spacing ratio is 1/3, which means column is 3 times wider than the spacing between columns. Spacing could be given as a ratio, a percentage or a floating-point number.
 +
 +
Next, use rowchildren component to place components into an integral number of these columns. You can also optionally specify how many columns to skip ahead.
  
 +
== Equally Divided==
 
<source lang="xml" >
 
<source lang="xml" >
−
<portallayout>
+
    <rowlayout ncols="12">
−
<portalchildren width="50%">
+
        <forEach begin="1" end="3">
−
<panel height="150px" title="Yahoo">
+
            <rowchildren colspan="4" style="background-color: skyblue">
−
<panelchildren>
+
                1/3
−
<iframe width="100%" src="http://www.yahoo.com/"/>
+
            </rowchildren>
−
</panelchildren>
+
        </forEach>
−
</panel>
+
    </rowlayout>
−
<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>
 
 
</source>
 
</source>
  
−
= Row based layout =
+
== Position Offset ==
−
[Since ZK 7.0.0]
+
<source lang='xml'>
 +
    <rowlayout ncols="12">
 +
        <rowchildren colspan="4" style="background-color: skyblue" offset="2">
 +
            offset 2 columns
 +
        </rowchildren>
 +
    </rowlayout>
 +
</source>
  
−
If you want the portallayout displayed as row based layout, you can specify the ''orient'' property to ''horizontal''.
+
== Column Spacing==
−
Default is ''vertical''.
+
<source lang='xml'>
 +
    <rowlayout ncols="12" spacing="100%">
 +
        <forEach begin="1" end="3">
 +
            <rowchildren colspan="4" style="background-color: skyblue">
 +
                spacing = 100%
 +
            </rowchildren>
 +
        </forEach>
 +
    </rowlayout>
 +
</source>
  
−
For example,
+
The above examples look like:
−
 
+
[[File:rowlayout-examples.png | center]]
−
<source lang="xml" high="1">
 
−
<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>
 
−
</source>
 
  
 
=Supported Events=
 
=Supported Events=
  
−
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
−
| <center>onPortalMove</center>
+
| None
−
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc>
+
| None
−
Represents an event caused by a portal being moved.
 
−
 
 
 
|}
 
|}
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
 
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
−
  *[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren | Portalchildren]]
+
  *[[ZK_Component_Reference/Layouts/Rowlayout/Rowchildren | Rowchildren]]
  
 
=Use Cases=
 
=Use Cases=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 103: Line 82:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
−
{| border='1px' | width="100%"
+
{| 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]
+
|]
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 14:08, 12 January 2022


DocumentationZK Component ReferenceLayoutsRowlayout
Rowlayout

Rowlayout

Employment/Purpose

A rowlayout lays out a container which can have multiple columns, it offers a 12-column grid out of the box. You can simply chooses the number of columns to occupy for each major content area, and may also skip columns for extra space without inserting space-inducing elements.

The following diagram illustrates the rowlayout/rowchildren components and their various configurable parameters.

ZKComRef Rowlayout.PNG

Example

Using rowlayout component is simple. First, use rowlayout to divide the horizontal space of its parent container into a number of columns. You can also optionally specify the column/spacing ratio. The default number of columns is 12, and the default column/spacing ratio is 1/3, which means column is 3 times wider than the spacing between columns. Spacing could be given as a ratio, a percentage or a floating-point number.

Next, use rowchildren component to place components into an integral number of these columns. You can also optionally specify how many columns to skip ahead.

Equally Divided

    <rowlayout ncols="12">
        <forEach begin="1" end="3">
            <rowchildren colspan="4" style="background-color: skyblue">
                1/3
            </rowchildren>
        </forEach>
    </rowlayout>

Position Offset

    <rowlayout ncols="12">
        <rowchildren colspan="4" style="background-color: skyblue" offset="2">
            offset 2 columns
        </rowchildren>
    </rowlayout>

Column Spacing

    <rowlayout ncols="12" spacing="100%">
        <forEach begin="1" end="3">
            <rowchildren colspan="4" style="background-color: skyblue">
                spacing = 100%
            </rowchildren>
        </forEach>
    </rowlayout>

The above examples look like:

Rowlayout-examples.png

Supported Events

Name
Event Type
None None

Supported Children

* Rowchildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/12


Version Date Content
]



Last Update : 2022/01/12

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Layouts/Rowlayout&oldid=52758"