This documentation is for an older version of ZK. For the latest documentation please
click here.
This documentation is for an older version of ZK. For the latest documentation please
click here.
Panel is made by 3*3 grid style, it can separate two styling: Has frame and Without frame.
Note:
Structure:
Events:
|
Action: |
Normal (Open) |
Hover |
Click, Select, and Drag. |
Focus |
Focus and Hover |
Disable |
|
CSS naming: |
|
|
|
|
| |
|
Supported |
V | |||||
|
CSS naming: |
|
|
|
|
|
|
|
Supported |
V |
V |
CSS Specification:
|
Class Name |
Description |
Default Values |
|
.z-panel |
Border |
border-style: solid; border-color: #B1CBD5; border-width: 0; overflow: hidden; |
|
|
Background of header |
overflow: hidden; zoom: 1; color: #15428b; font: normal ${fontSizeM} ${fontFamilyT}; padding: 5px 3px 4px 5px; border: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; font-weight:bold; |
|
.z-panel-children |
Border of panel children |
border: 1px solid #B1CBD5; border-top: 0 none; overflow: hidden; background: white; position: relative; |
|
.z-panel-bbar .z-toolbar |
Border of bottom toolbar |
border: 1px solid #B1CBD5; border-top: 0 none; overflow: hidden; padding: 2px; |
|
.z-panel-tbar .z-toolbar |
Border of top toolbar |
border: 1px solid #B1CBD5;overflow: hidden; padding: 2px; border-top: 1px solid #B1CBD5; border-bottom: 0 none; |
|
.z-panel-children-noheader |
Border without header of panel children |
Border-top: 1px solid #B1CBD5; |
|
.z-panel-cm .z-panel-children |
Top border |
border-top: 1px solid #B1CBD5; |
|
.z-panel-tl .z-panel-header |
Font size of header |
color: #15428b; font: normal ${fontSizeM} ${fontFamilyT}; padding: 5px 0 4px 0; border: 0 none; background: transparent;font-weight:bold; |
|
.z-panel-tm |
Background of top middle |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 0; overflow: hidden; |
|
.z-panel-tl |
Background of top left |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat 0 0; padding-left: 6px; zoom: 1; border-bottom: 1px solid #B1CBD5; |
|
.z-panel-tr |
Background of top right |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat right 0; zoom: 1; padding-right: 6px; |
|
.z-panel-cm |
Background of center middle |
border: 0 none; padding: 0; margin: 0; font: normal ${fontSizeM} ${fontFamilyT}; padding-top: 6px; background: #D8ECF7; |
|
.z-panel-cl |
Background of center left |
background: #fff url(${c:encodeURL('~./zul/img/panel/panel-lr.gif')}) repeat-y 0 0; padding-left: 6px; zoom: 1; |
|
.z-panel-cr |
Background of center right |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-lr.gif')}) repeat-y right 0; padding-right: 6px; zoom: 1; |
|
.z-panel-bm |
Background of bottom middle |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 bottom; zoom: 1; |
|
.z-panel-bl |
Background of bottom left |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1; |
|
.z-panel-br |
Background of bottom right |
background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat right bottom; padding-right: 6px; zoom: 1; |
|
.z-panel-noheader |
Border without header |
border-bottom: 0px; |
|
.z-panel-noheader .z-panel-tm |
Height without header |
height: 6px; font-size: 0; line-height: 0; |
|
.z-panel-cm .z-panel-children |
Border of panel children |
border:1px solid #B1CBD5; background: transparent; |
|
.z-panel-bm .z-panel-fbar |
Padding of footer toolbar |
padding-bottom: 6px; |
|
.z-panel-nofbar .z-panel-bm |
Height without footer toolbar |
height: 6px; font-size: 0; line-height: 0; |
|
.z-panel-noborder .z-panel-children-noborder |
No border of panel children |
Border-width: 0; |
|
.z-panel-noborder .z-panel-header-noborder |
No border of header |
border-width: 0; border-bottom: 1px solid #B1CBD5; |
|
.z-panel-noborder .z-panel-tbar-noborder .z-toolbar |
No border of top toolbar |
border-width: 0; border-bottom: 1px solid #B1CBD5; |
|
.z-panel-noborder .z-panel-bbar-noborder .z-toolbar |
No border of bottom toolbar |
border-width: 0; border-top: 1px solid #B1CBD5; |
|
.z-panel-tool |
Background of tool icons |
overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn.gif')}) no-repeat; margin-left: 2px; |
