Borderlayout"
From Documentation
m |
m |
||
Line 1: | Line 1: | ||
{{ZKComponentReferencePageHeader}} | {{ZKComponentReferencePageHeader}} | ||
− | = | + | = Borderlayout = |
*Demonstration: | *Demonstration: | ||
− | *Java API: <javadoc>org.zkoss.zul. | + | *Java API: <javadoc>org.zkoss.zkex.zul.Borderlayout</javadoc> |
*JavaScript API: <javadoc directory="jsdoc">zul.YYY.XXX</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.YYY.XXX</javadoc> | ||
= Employment/Purpose = | = Employment/Purpose = | ||
− | + | The layout component is a nested component. The parent component is <tt>borderlayout</tt>, and its children components include <tt>north</tt>, <tt>south</tt>, <tt>center</tt>, <tt>west</tt>, and <tt>east</tt>. The combination of children components of <tt>borderlayout </tt>is free. | |
− | |||
− | |||
− | |||
= Example = | = Example = | ||
+ | [[Image:layout.jpg]] | ||
+ | <source lang="xml" > | ||
+ | <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" flex="true"> | ||
+ | <div style="background:#E6D92C"> | ||
+ | <label value="25%" | ||
+ | style="color:white;font-size:50px" /> | ||
+ | </div> | ||
+ | </center> | ||
+ | <east size="50%" border="none" flex="true"> | ||
+ | <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%" flex="true" border="0" splittable="true"> | ||
+ | <div style="background:#E6D92C"> | ||
+ | <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%" flex="true" collapsible="true"> | ||
+ | <div style="background:#B8D335"> | ||
+ | <label value="30%" | ||
+ | style="color:white;font-size:50px" /> | ||
+ | </div> | ||
+ | </east> | ||
+ | </borderlayout> | ||
+ | </center> | ||
+ | </borderlayout> | ||
+ | </source> | ||
Line 50: | Line 92: | ||
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | 5. | + | | 5.0.1 |
− | | | + | | 05/11/2010 |
| Initialization | | Initialization | ||
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 07:20, 11 May 2010
Borderlayout
- Demonstration:
- Java API: Borderlayout
- JavaScript API: XXX
Employment/Purpose
The layout component is a nested component. The parent component is borderlayout, and its children components include north, south, center, west, and east. The combination of children components of borderlayout is free.
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" flex="true">
<div style="background:#E6D92C">
<label value="25%"
style="color:white;font-size:50px" />
</div>
</center>
<east size="50%" border="none" flex="true">
<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%" flex="true" border="0" splittable="true">
<div style="background:#E6D92C">
<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%" flex="true" collapsible="true">
<div style="background:#B8D335">
<label value="30%"
style="color:white;font-size:50px" />
</div>
</east>
</borderlayout>
</center>
</borderlayout>
Supported events
None | None |
Supported Children
*ALL
Use cases
Version | Description | Example Location |
---|---|---|
5.0+ |
Version History
Version | Date | Content |
---|---|---|
5.0.1 | 05/11/2010 | Initialization |