South"
From Documentation
m (Add closable and slidable) |
m ((via JWB)) |
||
Line 100: | Line 100: | ||
− | {| | + | {| class='wikitable' | width="100%" |
! <center>Name</center> | ! <center>Name</center> | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
Line 123: | Line 123: | ||
=Version History= | =Version History= | ||
{{LastUpdated}} | {{LastUpdated}} | ||
− | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- |
Revision as of 13:11, 7 January 2022
South
- Demonstration: Borderlayout
- Java API: South
- JavaScript API: South
- Style Guide: South
Employment/Purpose
A south region of a border layout and only allows one component as its child.
Example
<borderlayout height="450px">
<north title="North" maxsize="300" size="50%" splittable="true" collapsible="true">
<borderlayout>
<west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true">
<div style="background:#B8D335">
<label value="25%"
style="color:white;font-size:50px" />
</div>
</west>
<center border="none">
<div style="background:#E6D92C" vflex="1">
<label value="25%"
style="color:white;font-size:50px" />
</div>
</center>
<east size="50%" border="none">
<label value="Here is a non-border"
style="color:gray;font-size:30px" />
</east>
</borderlayout>
</north>
<center border="0">
<borderlayout>
<west maxsize="600" size="30%" border="0" splittable="true">
<div style="background:#E6D92C" vflex="1">
<label value="30%"
style="color:white;font-size:50px" />
</div>
</west>
<center>
<label value="Here is a border"
style="color:gray;font-size:30px" />
</center>
<east title="East" size="30%" collapsible="true">
<div style="background:#B8D335" vflex="1">
<label value="30%"
style="color:white;font-size:50px" />
</div>
</east>
</borderlayout>
</center>
</borderlayout>
Properties and Features
Caption
A layout region might have a caption, which is specified by declaring a child component called caption.
[ZK EE] [Since 6.5.0]
<borderlayout>
<south>
<caption label="search" image="/img/live.gif">
<combobox>
<comboitem label="item 1" />
<comboitem label="item 2" />
<comboitem label="item 3" />
<comboitem label="item 4" />
</combobox>
</caption>
<div>
Content
</div>
</south>
</borderlayout>
Closable
Whether users can open or close the region. Require collapsible="true"
.
Default: true.
[Since 8.5.2]
Slidable
Whether users can slide (preview) the region when clicked on a collapsed region. Require collapsible="true"
.
Default: true.
[Since 8.5.2]
Supported Events
None | None |
- Inherited Supported Events: LayoutRegion
How to Layout
For more details, please refer to Borderlayout.
Supported Children
*ALL
Use Cases
Version History
Version | Date | Content |
---|---|---|
6.5.0 | June 2012 | ZK-969: The LayoutRegion component support caption component as it's title |
8.5.2 | May 2018 | ZK-3329: Collapsible Borderlayout region in slide or open mode only |