Vlayout"
From Documentation
| (13 intermediate revisions by 3 users not shown) | |||
| Line 11: | Line 11: | ||
The vlayout component is a simple vertical oriented layout. Added components will be placed underneath each other in a column. | 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. If you need | + | 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 = | = Example = | ||
| − | [[Image: | + | [[Image:ZKComRef_Hlayout_Simple_Example.PNG]] |
<source lang="xml" > | <source lang="xml" > | ||
| Line 29: | Line 29: | ||
</zk> | </zk> | ||
</source> | </source> | ||
| + | |||
| + | = Spacing = | ||
| + | |||
| + | The default spacing between two child components is <code>0.3em</code>. You could modify it if you like: | ||
| + | |||
| + | <source lang="xml"> | ||
| + | <hlayout spacing="0"> | ||
| + | <textbox/> | ||
| + | <button label="Click Me"/> | ||
| + | </hlayout> | ||
| + | </source> | ||
| + | |||
| + | = 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 <code>vflex="min"</code> which doesn't auto resize in a normal case. | ||
| + | <source lang='xml' highlight='6'> | ||
| + | <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> | ||
| + | </source> | ||
| + | |||
| + | <!-- | ||
| + | check js function onChildVisible_, onChildAdded_, onChildRemoved_ | ||
| + | |||
| + | --> | ||
| + | |||
| + | = 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= | ||
| − | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
| Line 43: | Line 86: | ||
*ALL | *ALL | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=Version History= | =Version History= | ||
| − | + | {{LastUpdated}} | |
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
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
<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
| None | None |
Supported Children
*ALL
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.4 | August, 2010 | new added component |