North"
From Documentation
Jimmyshiau (talk | contribs) |
Jumperchen (talk | contribs) |
||
| Line 65: | Line 65: | ||
For more details, please refer to [[ZK_Component_Reference/Layouts/Borderlayout#How_to_Layout|Borderlayout]]. | For more details, please refer to [[ZK_Component_Reference/Layouts/Borderlayout#How_to_Layout|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.1.0] | ||
| + | |||
| + | <source lang="xml" > | ||
| + | <borderlayout> | ||
| + | <north> | ||
| + | <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> | ||
| + | </north> | ||
| + | </borderlayout> | ||
| + | </source> | ||
=Supported Events= | =Supported Events= | ||
| Line 90: | Line 113: | ||
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
| − | | | + | | 6.1.0 |
| − | | | + | | June 2012 |
| − | | | + | | [http://tracker.zkoss.org/browse/ZK-969 ZK-969]: The LayoutRegion component support caption component as it's title |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} | ||
Revision as of 08:18, 14 June 2012
North
- Demonstration: Borderlayout
- Java API: North
- JavaScript API: North
- Style Guide: North
Employment/Purpose
A north 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>
How to Layout
For more details, please refer to 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.1.0]
<borderlayout>
<north>
<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>
</north>
</borderlayout>
Supported Events
| None | None |
- Inherited Supported Events: LayoutRegion
Supported Children
*ALL
Use Cases
Version History
| Version | Date | Content |
|---|---|---|
| 6.1.0 | June 2012 | ZK-969: The LayoutRegion component support caption component as it's title |