Button"
From Documentation
m (correct highlight (via JWB)) |
|||
(6 intermediate revisions by 2 users not shown) | |||
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 [ | + | The following LESS variables are used for the Button component. Check other variables from [[ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Variables | here]]. |
{| | {| | ||
Line 64: | Line 64: | ||
== Target Design == | == Target Design == | ||
− | Assume the image below is our target design for Button component. No border, gradient background, rounded corner | + | Assume the image below is our target design for Button component. No border, gradient background, rounded corner or shadow effects. |
[[File:styleguide-button-design.png]] | [[File:styleguide-button-design.png]] | ||
Line 72: | Line 72: | ||
=== Setup environment and Analyze design === | === Setup environment and Analyze design === | ||
− | * Check [[ | + | * Check [[ZK_Style_Customization_Guide/Look_and_Feel_Customization/Customize_Component | the instruction]] to setup component customization environment. |
* Analyze the design | * Analyze the design | ||
** Used Color | ** Used Color | ||
Line 87: | Line 87: | ||
=== Modify button.less file to achieve target design === | === Modify button.less file to achieve target design === | ||
+ | |||
+ | Refer [[ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions | here]] for built-in zk less functions. | ||
* Change text color and remove border and text-shadow effect: | * Change text color and remove border and text-shadow effect: | ||
Line 172: | Line 174: | ||
= Additional Customization = | = Additional Customization = | ||
− | If icon font is used inside button component as | + | If icon font is used inside a button component as below: |
<source lang="xml"> | <source lang="xml"> | ||
<button label="Button" iconSclass="z-icon-flag" /> | <button label="Button" iconSclass="z-icon-flag" /> | ||
</source> | </source> | ||
− | The icon color is same as label by default, if you wish to change icon color only, add extra style | + | The icon color is same as label by default, if you wish to change icon color only, add extra style like this: |
− | <source lang="css" | + | <source lang="css" highlight="4"> |
.z-button { | .z-button { | ||
/* omitted */ | /* omitted */ |
Latest revision as of 13:24, 19 January 2022
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 here.
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 or shadow effects.
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 a button component as below:
<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 like this:
.z-button {
/* omitted */
> [class*="z-icon-"] {
color: red;
}
}
Version History
Version | Date | Content |
---|---|---|