Button

From Documentation
Revision as of 09:05, 7 November 2013 by Vincent (talk | contribs) (Created page with "{{ZKStyleCustomizationGuidePageHeader}} = Component Reference = Component Reference: Button = DOM Structure = <source...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


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:

Styleguide-button.png


Version History

Last Update : 2013/11/07


Version Date Content
     



Last Update : 2013/11/07

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.