Button"
From Documentation
m (→Final result) |
|||
Line 170: | Line 170: | ||
[[File:styleguide-button.png]] | [[File:styleguide-button.png]] | ||
− | = | + | = Extra Customization = |
+ | |||
+ | If icon font is used inside button component as follows: | ||
+ | <source lang="xml"> | ||
+ | <button label="Button" iconSclass="z-icon-flag" /> | ||
+ | </source> | ||
+ | |||
+ | The icon color is same as label, if you wish to change icon color only, add extra style in button.less as follows: | ||
+ | <source lang="css" high="4"> | ||
+ | .z-button { | ||
+ | /* omitted */ | ||
+ | |||
+ | i { | ||
+ | color: red; | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
=Version History= | =Version History= |
Revision as of 03:34, 8 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 correspond to it's DOM structure, then each state have different style.
.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 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
- 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
Extra 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, if you wish to change icon color only, add extra style in button.less as follows:
.z-button {
/* omitted */
i {
color: red;
}
}
Version History
Version | Date | Content |
---|---|---|