Borderlayout
Prev 1. XUL Components Next

Borderlayout

Borderlayout is composed of five children, North, South, Center, East, and West.

Whole part

CSS Definition

Description

Default Values

div.layout-container

The outline of borderlayout

Width:100%; height:100%; overflow:hidden; background-color:#C4DCFB; border:0 none; position: relative; visibility: hidden;

div.layout-nested

The outline of nested borderlayout

border:0 none;

North part

CSS Definition

Description

Default Values

div.layout-region

The outline of the region without border

position:absolute; border:0 none; overflow:hidden; background-color:white;

div.layout-region-normal

The outline of the region with border

border:1px solid #9CBDFF;

div.layout-region-north

The outline of the north region.

z-index:11;

div.layout-region-body

The outline of the region body

div.layout-split

The outline of the splitter

position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB;

div.layout-split-v

The outline of the vertical splitter

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-v.png')} "); background-position: top;

div. layout-split-v-ns

The outline of the vertical splitter without splitable

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-v-ns.png')} "); background-position: top;

span.layout-split-btn-t

The outline of the top button of the splitter

filter:alpha(opacity=50); opacity:0.5; background-repeat: no-repeat; display:-moz-inline-box; vertical-align:top; display:inline-block; line-height:1px; font-size:1px; width: 50px; min-height: 6px; height: 6px;background-image: url( ${c:encodeURL('~./zul/img/splt/colps-t.png')} );

span.layout-split-btn-t:hover

The outline of the top button of the hovered splitter

opacity:1;

South part

CSS Definition

Description

Default Values

div.layout-region

The outline of the region without border

position:absolute; border:0 none; overflow:hidden; background-color:white;

div.layout-region-normal

The outline of the region with border

border:1px solid #9CBDFF;

div.layout-region-south

The outline of the south region.

z-index:11;

div.layout-region-body

The outline of the region body

div.layout-split

The outline of the splitter

position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB;

div.layout-split-v

The outline of the vertical splitter

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-v.png')} "); background-position: top;

div. layout-split-v-ns

The outline of the vertical splitter without splitable

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-v-ns.png')} "); background-position: top;

span.layout-split-btn-b

The outline of the bottom button of the splitter

filter:alpha(opacity=50); opacity:0.5; background-repeat: no-repeat; display:-moz-inline-box; vertical-align:top; display:inline-block; line-height:1px; font-size:1px; width: 50px; min-height: 5px; height: 6px;background-image: url( ${c:encodeURL('~./zul/img/splt/colps-b.png')} );

span.layout-split-btn-b:hover

The outline of the bottom button of the hovered splitter

opacity:1;

Center part

CSS Definition

Description

Default Values

div.layout-region

The outline of the region without border

position:absolute; border:0 none; overflow:hidden; background-color:white;

div.layout-region-normal

The outline of the region with border

border:1px solid #9CBDFF;

div.layout-region-center

The outline of the center region.

div.layout-region-body

The outline of the region body

East part

CSS Definition

Description

Default Values

div.layout-region

The outline of the region without border

position:absolute; border:0 none; overflow:hidden; background-color:white;

div.layout-region-normal

The outline of the region with border

border:1px solid #9CBDFF;

div.layout-region-east

The outline of the east region.

z-index:10;

div.layout-region-body

The outline of the region body

div.layout-split

The outline of the splitter

position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB;

div.layout-split-h

The outline of the horizontal splitter

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-h.png')} "); background-position: left;

div. layout-split-h-ns

The outline of the horizontal splitter without splitable

background-image:url("${c:encodeURL('~./zul/img/splt/splt-h-ns.png')}"); background-position: left;

span.layout-split-btn-r

The outline of the right button of the splitter

filter:alpha(opacity=50); opacity:0.5; background-repeat: no-repeat; display:-moz-inline-box; vertical-align:top; display:inline-block; line- height:1px; font-size:1px; width: 6px; min-height: 50px; height: 50px; background-image: url( ${c:encodeURL('~./zul/img/splt/colps-r.png')} );

span.layout-split-btn-r:hover

The outline of the right button of the hovered splitter

opacity:1;

West part

CSS Definition

Description

Default Values

div.layout-region

The outline of the region without border

position:absolute; border:0 none; overflow:hidden; background-color:white;

div.layout-region-normal

The outline of the region with border

border:1px solid #9CBDFF;

div.layout-region-west

The outline of the west region.

z-index:10;

div.layout-region-body

The outline of the region body

div.layout-split

The outline of the splitter

position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB;

div.layout-split-h

The outline of the horizontal splitter

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt- h.png')} "); background-position: left;

div. layout-split-h-ns

The outline of the horizontal splitter without splitable

background-image:url(" ${c:encodeURL('~./zul/img/splt/splt-h-ns.png')} "); background-position: left;

span.layout-split-btn-l

The outline of the left button of the splitter

filter:alpha(opacity=50); opacity:0.5; background-repeat: no-repeat; display:-moz-inline-box; vertical-align:top; display:inline-block; line-height:1px; font-size:1px; width: 6px; min-height: 50px; height: 50px; background-image: url( ${c:encodeURL('~./zul/img/splt/colps-l.png')} );

span.layout-split-btn-l:hover

The outline of the left button of the hovered splitter

opacity:1;

Prev Up Next
 Home Button