Button"
From Documentation
Line 15: | Line 15: | ||
= LESS Source = | = LESS Source = | ||
− | Basically, LESS source is | + | Basically, LESS source is correspondent to it's DOM structure, each state also have different styles. |
<source lang="css"> | <source lang="css"> | ||
Line 40: | Line 40: | ||
== LESS Variables == | == LESS Variables == | ||
− | The following LESS variables are used for Button component. Check other variables from [http://github.com/zkoss/zk/blob/master/zul/src/archive/web/zul/less/_zkvariables.less Github]. | + | The following LESS variables are used for the Button component. Check other variables from [http://github.com/zkoss/zk/blob/master/zul/src/archive/web/zul/less/_zkvariables.less Github]. |
{| | {| |
Revision as of 08:07, 22 November 2013
Component Reference
Component Reference: Button
DOM Structure
<button class="z-button">
<img class="z-button-image" />
</button>
LESS Source
Basically, LESS source is correspondent to it's DOM structure, each state also have different styles.
.z-button {
/* normal style */
/* hover style */
&:hover {
}
/* focus style */
&:focus {
}
/* active style */
&:active {
}
/* disabled style */
&[disabled] {
}
}
Check complete LESS source for Button from Github.
LESS Variables
The following LESS variables are used for the Button component. Check other variables from Github.
Variables | Default Value |
---|---|
@baseButtonHeight | 24px |
@buttonBorderColor | #A9A9A9 |
@buttonGradientStart | #FEFEFE |
@buttonGradientEnd | #EEEEEE |
Customize Sample
Target Design
Assume the image below is our target design for Button component. No border, gradient background, rounded corner and shadow effect.
Implementation Details
Setup environment and Analyze design
- Check the instruction to setup component customization environment.
- Analyze the design
- Used Color
- Text: 14px, #FFFFFF
- Normal Background: #5687A8
- Hover Background: #5E94B8
- Pressed Background: #4C7895
- Focus Background: #436983
- Disabled Background: #ACACAC
- Size
- Height: 32px
- Horizontal Padding: 16px
- Vertical Padding: 4px
- Used Color
Modify button.less file to achieve target design
Refer here for built-in zk less functions.
- Change text color and remove border and text-shadow effect:
.z-button {
.fontStyle(@baseTitleFontFamily, 14px, normal, #FFFFFF);
text-shadow: none; /* remove text shadow */
border: none;
/* omitted */
}
- Remove rounded corner:
.z-button {
.borderRadius(0);
}
- Modify Normal state background:
.z-button {
.verGradient(#5687A8, #5687A8); /* no gradient, pass the same color arguments for the function */
}
- Modify Hover state:
.z-button {
&:hover {
color: #FFFFFF;
.verGradient(#5E94B8, #5E94B8); /* no gradient, pass the same color arguments for the function */
.boxShadow(inset 0 -2px 0 #436983); /* for simulation 3d effect */
}
}
- Modify Pressed state:
.z-button {
&:active {
color: #FFFFFF;
.verGradient(#4C7895, #4C7895); /* no gradient, pass the same color arguments for the function */
.boxShadow(inset 0 2px 0 #3A5B72); /* for simulation 3d effect */
}
}
- Modify Focus state:
.z-button {
&:focus {
color: #FFFFFF;
.verGradient(#436983, #436983); /* no gradient, pass the same color arguments for the function */
.boxShadow(none);
}
}
- Modify Disabled state:
.z-button {
&[disabled] {
color: #FFFFFF;
.verGradient(#ACACAC, #ACACAC); /* no gradient, pass the same color arguments for the function */
.boxShadow(none);
.opacity(1); /* no opacity needed */
}
}
- Modify Size:
.z-button {
/* omitted */
min-height: 32px;
padding: 4px 16px;
}
Final result
Additional Customization
If icon font is used inside button component as follows:
<button label="Button" iconSclass="z-icon-flag" />
The icon color is same as label by default, if you wish to change icon color only, add extra style as follows:
.z-button {
/* omitted */
> [class*="z-icon-"] {
color: red;
}
}
Version History
Version | Date | Content |
---|---|---|