Vbox"

From Documentation
 
(6 intermediate revisions by the same user not shown)
Line 12: Line 12:
 
The vbox component is used to create a vertically oriented box. Added components will be placed underneath each other in a column.
 
The vbox component is used to create a vertically oriented box. Added components will be placed underneath each other in a column.
  
Notice that hbox and vbox are designed to provode more sophisticated layout, such as splitter, alignment and packing. If you need only the layout feature, it is suggest to use [[ZK Component Reference/Layouts/Hlayout | Hlayout]] and [[ZK Component Reference/Layouts/Vlayout | Vlayout]] instead, since the performance is much better (due to the use of HTML DIV instead of TABLE).
+
= Suggest Alternative Components=
 +
== Vlayout/Hlayout ==
 +
Notice that hbox and vbox are designed to provide a more sophisticated layout, such as splitter, alignment, and packing. If you need only the layout feature, it is suggested to use [[ZK Component Reference/Layouts/Hlayout | Hlayout]] and [[ZK Component Reference/Layouts/Vlayout | Vlayout]] instead, since the performance is much better (due to the use of HTML DIV instead of TABLE).
 +
 
 +
== Splitlatyout ==
 +
If you need a splitter, please use [[ZK%20Component%20Reference/Layouts/Splitlayout| splitlayout]].
  
 
= Example =
 
= Example =
Line 35: Line 40:
  
 
==Align and Pack==
 
==Align and Pack==
 +
{{versionSince| 5.0.0}}
 +
 
[[Image:ZKComRef_Vbox_Simple_Example_align_pack.PNG]]  
 
[[Image:ZKComRef_Vbox_Simple_Example_align_pack.PNG]]  
  
<source lang="xml" high="23">
+
<source lang="xml" highlight="23">
 
<zk xmlns:n="native">
 
<zk xmlns:n="native">
     <style content=".box { border: 1px solid lightgrey; }"/>
+
     <style content=".box {| class='wikitable' | width="100%"
 
     <custom-attributes  
 
     <custom-attributes  
 
         packs="${['', 'start', 'center', 'end']}"
 
         packs="${['', 'start', 'center', 'end']}"
Line 69: Line 76:
 
</zk>
 
</zk>
 
</source>
 
</source>
[Since 5.0.0]
 
  
 
= Cell Component  =
 
= Cell Component  =
 +
{{versionSince| 5.0.0}}
 
In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style. You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows. The code below demonstrates how to do this:  
 
In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style. You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows. The code below demonstrates how to do this:  
  
Line 81: Line 88:
 
</vbox>
 
</vbox>
 
</source>
 
</source>
[Since 5.0.0]
 
  
 
= Limitation =
 
= Limitation =
Line 97: Line 103:
 
=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>
Line 112: Line 118:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 122: Line 128:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 09:53, 6 June 2024

Vbox

Employment/Purpose

The vbox component is used to create a vertically oriented box. Added components will be placed underneath each other in a column.

Suggest Alternative Components

Vlayout/Hlayout

Notice that hbox and vbox are designed to provide a more sophisticated layout, such as splitter, alignment, and packing. If you need only the layout feature, it is suggested to use Hlayout and Vlayout instead, since the performance is much better (due to the use of HTML DIV instead of TABLE).

Splitlatyout

If you need a splitter, please use splitlayout.

Example

ZKComRef Vbox Simple Example.PNG

<zk>
     <vbox>
         <button label="Button 1"/>
         <button label="Button 2"/>
     </vbox>
     <hbox>
         <button label="Button 3"/>
         <button label="Button 4"/>
     </hbox>
</zk>

Properties

  • Inherited Properties: Box

Align and Pack

Since 5.0.0

ZKComRef Vbox Simple Example align pack.PNG

<zk xmlns:n="native">
    <style content=".box {| class='wikitable' | width="100%"
    <custom-attributes 
        packs="${['', 'start', 'center', 'end']}"
        aligns="${['', 'stretch', 'start', 'center', 'end']}"
    />

    <vlayout>
        <hlayout height="70px" width="600px">
            <div hflex="1" vflex="1" sclass="box">
              <n:h3>pack / align</n:h3>
            </div>
            <div forEach="${aligns}" hflex="1" vflex="1" sclass="box">
              <n:h3>${each}</n:h3>
            </div>
        </hlayout>
        <hlayout forEach="${packs}" height="150px" width="600px">
            <custom-attributes pack="${each}"/> 
            <div hflex="1" vflex="1" sclass="box">
              <n:h3>${pack}</n:h3>
            </div>
          
            <vbox forEach="${aligns}" align="${each}" pack="${pack}" hflex="1" vflex="1" sclass="box">
                <button label="1" />
                <button label="2" />
                <button label="3" />
            </vbox>
        </hlayout>
    </vlayout>
</zk>

Cell Component

Since 5.0.0 In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style. You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows. The code below demonstrates how to do this:

<vbox>
    <cell sclass="years">
        ...
    </cell>
</vbox>

Limitation

Box component is consisted by Table element. Therefore, when put Input element like Textbox, Combobox inside Box component, specify width and height to Box component will be ignored when browser try to render table element.

For example,

<hbox height="200px" width="200px" style="border: 1px solid red">
    <textbox hflex="1" value="1" />
    <textbox hflex="1" value="1" />
</hbox>

You will see the Box width exceed 200px. Also check the sample with pure HTML in jsfiddle.

Supported Events

Name
Event Type
None None
  • Inherited Supported Events: Box

Supported Children

*ALL

Use Cases

Version Description Example Location
     

Version History

Last Update : 2024/06/06


Version Date Content
     



Last Update : 2024/06/06

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