Employment/Purpose

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

Common Use Cases

For common use cases such as collapsible panels, splittable regions, and nested border layouts, see Borderlayout — Common Use Cases.

Example

Borderlayout

<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

Size

Sets the width of the east region. This is a shortcut for the width attribute and accepts any valid CSS width value such as a fixed pixel amount or a percentage of the parent borderlayout.

<borderlayout height="400px">
    <east size="30%" title="East Panel">
        <label value="East content" />
    </east>
    <center>
        <label value="Center content" />
    </center>
</borderlayout>

Note that height cannot be set on an east region; its height is determined by the north and south sibling regions.

Caption

CE
PE
EE

since 6.5.0

A layout region may have a caption, which is specified by declaring a child component <caption>.

<borderlayout>
    <north>
        <caption label="search" image="/img/live.gif"/>
        <div>
        Content
        </div>  
    </north>
</borderlayout>

Closable

since 8.5.2 Default: true

Whether users can open or close the region. Require collapsible="true". Notice you need to click the icon on the title or on the splitter to open/close a region. Clicking a title slides a region instead of opening it. Closable

Slidable

since 8.5.2 Default: true

Whether users can slide (preview) the region when clicking on the title of the collapsed region. It opens the region like a drawer overlapping on the <center>, so it doesn’t affect the size of <center> which is different from opening the region. Require collapsible="true".

Layout slidable

Supported Events

The east region does not define any events of its own; refer to LayoutRegion for inherited events.

Supported Children

*ALL