Employment/Purpose

A west region of a border layout and only allows one component as its child.

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

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

Size

Specifies the width of the west region. This is a shortcut for the standard width attribute — setting size is equivalent to setting width on the <west> element. Accepts any valid CSS width value such as a pixel count or a percentage of the parent borderlayout.

<borderlayout height="400px">
    <west size="200px" splittable="true">
        <label value="Navigation" />
    </west>
    <center>
        <label value="Main content" />
    </center>
</borderlayout>

You can also use a percentage-based width:

<borderlayout height="400px">
    <west size="25%" collapsible="true">
        <label value="Sidebar" />
    </west>
    <center>
        <label value="Content area" />
    </center>
</borderlayout>

Common Use Cases

Navigation sidebar with fixed width

Set a fixed pixel width on <west> and enable splittable so users can drag to resize:

<borderlayout height="500px">
    <west size="220px" splittable="true" title="Menu">
        <listbox>
            <listitem label="Dashboard" />
            <listitem label="Reports" />
            <listitem label="Settings" />
        </listbox>
    </west>
    <center>
        <label value="Main content area" />
    </center>
</borderlayout>

Collapsible sidebar

Allow the panel to collapse to free up horizontal space:

<borderlayout height="500px">
    <west size="30%" collapsible="true" title="Sidebar">
        <div>Sidebar content</div>
    </west>
    <center border="none">
        <div>Main content</div>
    </center>
</borderlayout>

For additional layout examples, see Borderlayout.

Supported Events

Supported Children

*ALL