Button
From Documentation
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
Check the instruction for customization step, and if we change the LESS variables in button.less as follows:
@import "~./zul/less/_header.less";
@baseButtonHeight: 32px;
@buttonBorderColor: #006400;
@buttonGradientStart: #F8FFE8;
@buttonGradientEnd: #B7DF2D;
@hoverBorderColor: #006400;
@hoverGradientStart: #F8FFE8;
@hoverGradientEnd: #32CD32;
.z-button {
/* omitted */
}
The look and feel of Button component looks like the image below:
Version History
Version | Date | Content |
---|---|---|