Vlayout"

From Documentation
m ((via JWB))
 
(2 intermediate revisions by the same user not shown)
Line 45: Line 45:
  
 
The window's height below (line 6) will grow when we hide the blue-background div. This also works for <code>vflex="min"</code> which doesn't auto resize in a normal case.
 
The window's height below (line 6) will grow when we hide the blue-background div. This also works for <code>vflex="min"</code> which doesn't auto resize in a normal case.
<source lang='xml' high='6'>
+
<source lang='xml' highlight='6'>
 
     <vlayout height="400px" style="border: solid 1px">
 
     <vlayout height="400px" style="border: solid 1px">
 
         <button onClick="div.setVisible(false)" label="hide the blue box below"/>
 
         <button onClick="div.setVisible(false)" label="hide the blue box below"/>
Line 61: Line 61:
  
 
-->
 
-->
 +
 +
= Horizontal Alignment =
 +
The default align is left. You can change by specifying a CSS rule at "style": <code>text-align:right</code>, <code>text-align:center</code>
 +
 +
<syntaxhighlight lang="XML">
 +
        <vlayout style="text-align:right">
 +
            <button/>
 +
            <button/>
 +
            <button/>
 +
        </vlayout>
 +
</syntaxhighlight>
  
 
=Supported events=
 
=Supported events=
Line 75: Line 86:
  
 
  *ALL
 
  *ALL
 
=Use cases=
 
 
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
  
 
=Version History=
 
=Version History=

Latest revision as of 08:53, 6 June 2024

Vlayout

Employment/Purpose

The vlayout component is a simple vertical oriented layout. Added components will be placed underneath each other in a column.

Notice that hlayout and vlayout do not support splitter, alignment and packing. If you need them, please use ZK Component Reference/Layouts/Hbox and ZK Component Reference/Layouts/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:

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

Resize Child Components' Height Dynamically

When a Vlayout's content changes (e.g. adding / removing components or component's visibility changes), it will resize all its child components' height dynamically.

The window's height below (line 6) will grow when we hide the blue-background div. This also works for vflex="min" which doesn't auto resize in a normal case.

    <vlayout height="400px" style="border: solid 1px">
        <button onClick="div.setVisible(false)" label="hide the blue box below"/>
        <div style="height: 400px;background-color: lightblue" id="div">
            box
        </div>
        <window border="normal" vflex="1">
            0px height at first
        </window>
    </vlayout>


Horizontal Alignment

The default align is left. You can change by specifying a CSS rule at "style": text-align:right, text-align:center

        <vlayout style="text-align:right">
            <button/>
            <button/>
            <button/>
        </vlayout>

Supported events

Name
Event Type
None None

Supported Children

*ALL

Version History

Last Update : 2024/06/06


Version Date Content
5.0.4 August, 2010 new added component



Last Update : 2024/06/06

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