Tabbox"
From Documentation
m (→Default Mold) |
m (→LESS Variables) |
||
Line 119: | Line 119: | ||
== LESS Variables == | == LESS Variables == | ||
− | Tabbox | + | The following LESS variables are used for Tabbox component. Check other variables from [http://github.com/zkoss/zk/blob/master/zul/src/archive/web/zul/less/_zkvariables.less Github]. |
+ | |||
+ | {| | ||
+ | |- | ||
+ | ! style="border: 1px inset #333333; padding: 0 4px;" | Variables | ||
+ | ! style="border: 1px inset #333333; padding: 0 4px;" | Default Value | ||
+ | |- | ||
+ | | style="border: 1px inset #333333; padding: 0 4px;" | @tabSelectedBackgroundColor | ||
+ | | style="border: 1px inset #333333; padding: 0 4px;" | #FFFFFF | ||
+ | |} | ||
= Customize Sample = | = Customize Sample = |
Revision as of 07:48, 18 November 2013
Component Reference
Component Reference: Tabbox
DOM Structure
Default Mold
<div class="z-tabbox z-tabbox-orient z-tabbox-scroll">
<div class="z-tabs">
<ul class="z-tabs-content">
<li class="z-tab">
<a class="z-tab-content">
<div class="z-tab-button">
<i class="z-icon-times z-tab-icon"></i>
</div>
<span class="z-tab-text">
<img class="z-tab-image">
</span>
</a>
</li>
<!-- other tab -->
</ul>
</div>
<div class="z-tabpanels">
<div class="z-tabpanel"></div>
<!-- other tabpanel -->
</div>
<div class="z-tabbox-icon z-tabbox-left">
<i class="z-icon-chevron-left"></i>
</div>
<div class="z-tabbox-icon z-tabbox-right">
<i class="z-icon-chevron-right"></i>
</div>
</div>
- Line 1: z-tabbox-orient is represent for tabbox orientation:
- z-tabbox-horizontal (default),
- z-tabbox-horizontal-bottom,
- z-tabbox-vertical or
- z-tabbox-vertical-right
- Line 7: Close Icon Font used.
- Line 22: Chevron-left Icon Font used for tab scrolling.
- Line 25: Chevron-right Icon Font used for tab scrolling.
Accordion Mold
<div class="z-tabbox z-tabbox-accordion">
<div class="z-tabpanels">
<div class="z-tabpanel">
<div class="z-tab">
<a class="z-tab-content">
<div class="z-tab-button">
<i class="z-icon-times z-tab-icon"></i>
</div>
<span class="z-tab-text"></span>
</a>
</div>
<div class=" z-tabpanel-content"></div>
</div>
<!-- other tabpanel with tab inside -->
</div>
</div>
- Line 7: Close Icon Font used.
LESS Source
Basically, LESS source is correspond to it's DOM structure, then each orientation have different style.
.z-tabbox {
/* basic style */
/* Scrollable style */
&-scroll {
}
/* icon style */
&-icon {
}
/* horizontal-bottom style */
&-horizontal-bottom {
}
/* vertical style */
&-vertical {
}
/* vertical-right style */
&-vertical-right {
}
/* Accordion mold */
&-accordion {
}
}
/* default tabs style */
.z-tabs {
&-content {}
}
/* default tab style */
.z-tab {
&-content {}
&-button {}
&-icon {}
&-text {}
&-image {}
}
/* default tabpanels style */
.z-tabpanels {
}
/* default tabpanel style */
.z-tabpanel {
}
Check complete LESS source for Window from Github.
LESS Variables
The following LESS variables are used for Tabbox component. Check other variables from Github.
Variables | Default Value |
---|---|
@tabSelectedBackgroundColor | #FFFFFF |
Customize Sample
Check the instruction for customization step, and if we change the LESS variables in tabbox.less as follows:
@import "~./zul/less/_header.less";
@baseGradientStart: #F8FFE8; // normal tab background
@baseGradientEnd: #B7DF2D; // normal tab background
@tabSelectedBackgroundColor: #90EE90; // selected tab background
.z-tabbox {
/* omitted */
}
The look and feel of Tabbox component looks like the image below:
Version History
Version | Date | Content |
---|---|---|