East"

From Documentation
m (Created page with 'init')
 
m ((via JWB))
(17 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
init
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= East  =
 +
 
 +
*Demonstration: [http://www.zkoss.org/zkdemo/layout/border_layout Borderlayout]
 +
*Java API: <javadoc>org.zkoss.zul.East</javadoc>
 +
*JavaScript API: <javadoc directory="jsdoc">zul.layout.East</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_(East)| East]]
 +
 
 +
= Employment/Purpose =
 +
 
 +
An east region of a border layout and only allows one component as its child.
 +
 
 +
= Example =
 +
 
 +
[[Image:ZKCompRef_Borderlayout.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">
 +
<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>
 +
</source>
 +
 
 +
=How to Layout=
 +
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}}
 +
{{versionSince| 6.5.0}}
 +
 
 +
<source lang="xml" >
 +
<borderlayout>
 +
<east>
 +
<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>
 +
</east>
 +
</borderlayout>
 +
</source>
 +
 
 +
== Closable ==
 +
Whether users can open or close the region. Require <code>collapsible="true"</code>.
 +
Default: true.
 +
 
 +
{{versionSince| 8.5.2}}
 +
 
 +
== Slidable ==
 +
Whether users can slide (preview) the region when clicked on a collapsed region. Require <code>collapsible="true"</code>.
 +
Default: true.
 +
 
 +
{{versionSince| 8.5.2}}
 +
 
 +
=Supported Events=
 +
 
 +
 
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| None
 +
| None
 +
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LayoutRegion#Supported_Events | LayoutRegion]]
 +
 
 +
=Supported Children=
 +
 
 +
*ALL
 +
 
 +
=Use Cases=
 +
 
 +
[[ZK_Component_Reference/Layouts/Borderlayout#Use_Cases|Borderlayout]]
 +
 
 +
=Version History=
 +
{{LastUpdated}}
 +
{| class='wikitable' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| 6.5.0
 +
| June 2012
 +
| [http://tracker.zkoss.org/browse/ZK-969 ZK-969]: The LayoutRegion component support caption component as it's title
 +
|-
 +
| 8.5.2
 +
| May 2018
 +
| [http://tracker.zkoss.org/browse/ZK-3329 ZK-3329]: Collapsible Borderlayout region in slide or open mode only
 +
|}
 +
 
 +
{{ZKComponentReferencePageFooter}}

Revision as of 08:27, 14 January 2022


DocumentationZK Component ReferenceLayoutsBorderlayoutEast
East

East

Employment/Purpose

An east region of a border layout and only allows one component as its child.

Example

ZKCompRef Borderlayout.jpg 

<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.

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Since 6.5.0 

<borderlayout>
	<east>
		<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>	
	</east>
</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

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Borderlayout

Version History

Last Update : 2022/01/14


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



Last Update : 2022/01/14

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Layouts/Borderlayout/East&oldid=53066"