Hlayout"

From Documentation
Line 5: Line 5:
 
*Demonstration: N/A
 
*Demonstration: N/A
 
*Java API: <javadoc>org.zkoss.zul.Hlayout</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Hlayout</javadoc>
*JavaScript API: <javadoc directory="jsdoc">zul.layout.Hlayout</javadoc>
+
*JavaScript API: <javadoc directory="jsdoc">zul.box.Hlayout</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Hlayout | Hlayout]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 11: Line 12:
 
The hlayout component is a simple horizontal oriented layout. Each component placed in the hlayout will be placed horizontally in a row.
 
The hlayout component is a simple horizontal oriented layout. Each component placed in the hlayout will be placed horizontally in a row.
  
Notice that hlayout and vlayout do not support splitter. If you need it, please use [[ZK Component Reference/Layouts/Hbox]] and [[ZK Component Reference/Layouts/Vbox]] instead.
+
Notice that hlayout and vlayout do not support splitter. If you need it, please use [[ZK Component Reference/Layouts/Hbox | Hbox]] and [[ZK Component Reference/Layouts/Vbox | Vbox]] instead.
  
 
= Example =
 
= Example =
Line 74: Line 75:
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 83: Line 84:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/HtmlBasedComponent#Supported_Events | HtmlBasedComponent]]
  
 
=Supported Children=
 
=Supported Children=
Line 88: Line 90:
 
  *ALL
 
  *ALL
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"

Revision as of 10:44, 15 November 2010

Hlayout

Employment/Purpose

The hlayout component is a simple horizontal oriented layout. Each component placed in the hlayout will be placed horizontally in a row.

Notice that hlayout and vlayout do not support splitter. If you need it, please use Hbox and Vbox instead.

Example

ZKComRef Hlayout Simple Example.PNG

<zk>
     <vlayout>
         <button label="Button 1"/>
         <button label="Button 2"/>
     </vlayout>
     <hlayout>
         <button label="Button 3"/>
         <button label="Button 4"/>
     </hlayout>
</zk>

Spacing

The default spacing between two child components is 0.3em. You could modify it if you like:

<vlayout spacing="0">
  <textbox/>
  <button label="Click Me"/>
</vlayout>

Vertical Alignment

[since 5.0.5]

By default, the vertical alignment is middle (aka., center). You could change it to top by specifying sclass="z-valign-top", while bottom by sclass="z-valign-bottom". For example,

<vlayout>
    <hlayout>
        center: <textbox/>
    </hlayout>
    <hlayout sclass="z-valign-top">
        top: <textbox/>
    </hlayout>
    <hlayout sclass="z-valign-bottom">
        bottom: <textbox/>
    </hlayout>
</vlayout>

IE6 Limitation

Notice that, since the vertical alignment is specified in the CSS class (Component.setSclass(String)), there is some limitations for IE6. First, the vertical alignment is inherited to the inner hlayout. Thus, you have to specify the middle alignment explicitly in the inner hlayout, if you need it. For example,

<hlayout sclass="z-valign-bottom">
    bottom: <textbox/>
    <vlayout>
        <hlayout sclass="z-valign-middle">inner: <textbox/></hlayout>
    </vlayout>
</hlayout>

Supported Events

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Version Description Example Location
     

Version History

Version Date Content
5.0.4 August, 2010 new added component
5.0.5 October, 2010 Vertical alignment was supported.



Last Update : 2010/11/15

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