Button"

From Documentation
Line 62: Line 62:
 
= Customize Sample =
 
= Customize Sample =
  
Check [[User:Vincent/Use_LESS_to_Style_Component#Step to Customize Component by LESS  | the instruction]] for customization step, and if we change the LESS variables in button.less as follows:
+
== Target Design ==
  
 +
Assume the image below is our target design for Button component. No gradient, rounded corner and shadow effect.
 +
 +
[[File:styleguide-button-design.png]]
 +
 +
== Implementation Details ==
 +
 +
* Check [[User:Vincent/Use_LESS_to_Style_Component#Step to Customize Component by LESS  | the instruction]] to setup component customization environment.
 +
* Analyze the color used on the design
 +
** Text color: #FFFFFF
 +
** Normal Background: #5687A8
 +
** Hover Background: #5E94B8
 +
** Pressed Background: #4C7895
 +
** Focus Background: #436983
 +
** Disabled Background: #E3E3E3
 +
* Modify button.less file to achieve target design.
 +
 +
<div style="margin-left: 1.8em">
 +
 +
* Change text color and remove text-shadow effect:
 
<source lang="css">
 
<source lang="css">
@import "~./zul/less/_header.less";
+
.z-button {
 +
    .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, #FFFFFF);
 +
    text-shadow: none; /* remove text shadow */
 +
    /* omitted */
 +
}
 +
</source>
  
@baseButtonHeight: 32px;
+
* Remove rounded corner:
@buttonBorderColor: #006400;
+
<source lang="css">
@buttonGradientStart: #F8FFE8;
+
.z-button {
@buttonGradientEnd: #B7DF2D;
+
    .borderRadius(0);
@hoverBorderColor: #006400;
+
}
@hoverGradientStart: #F8FFE8;
+
</source>
@hoverGradientEnd: #32CD32;
 
  
 +
* Modify Normal state background:
 +
<source lang="css">
 
.z-button {
 
.z-button {
/* omitted */
+
    .verGradient(#5687A8, #5687A8); /* no gradient, pass the same color arguments for the function */
 
}
 
}
 
</source>
 
</source>
  
The look and feel of Button component looks like the image below:
+
* Modify Hover state:
 +
<source lang="css">
 +
.z-button {
 +
    &:hover {
 +
        color: #FFFFFF;
 +
        .verGradient(#5E94B8, #5E94B8); /* no gradient, pass the same color arguments for the function */
 +
        .boxShadow(inset 0 -1px 0 #436983); /* for simulation 3d effect */
 +
    }
 +
}
 +
</source>
 +
 
 +
* Modify Pressed state:
 +
<source lang="css">
 +
.z-button {
 +
    &:active {
 +
        color: #FFFFFF;
 +
        .verGradient(#4C7895, #4C7895); /* no gradient, pass the same color arguments for the function */
 +
        .boxShadow(inset 0 -1px 0 #3A5B72); /* for simulation 3d effect */
 +
    }
 +
}
 +
</source>
 +
 
 +
* Modify Focus state:
 +
<source lang="css">
 +
.z-button {
 +
    &:focus {
 +
        color: #FFFFFF;
 +
        .verGradient(#436983, #436983); /* no gradient, pass the same color arguments for the function */
 +
        .boxShadow(none);
 +
    }
 +
}
 +
</source>
 +
 
 +
* Modify Disabled state:
 +
<source lang="css">
 +
.z-button {
 +
    &[disabled] {
 +
        color: #FFFFFF;
 +
        .verGradient(#E3E3E3, #E3E3E3); /* no gradient, pass the same color arguments for the function */
 +
        .boxShadow(none);
 +
        .opacity(1); /* no opacity needed */
 +
    }
 +
}
 +
</source>
 +
 
 +
</div>
 +
 
 +
* Final result:
  
 
[[File:styleguide-button.png]]
 
[[File:styleguide-button.png]]
 
  
 
=Version History=
 
=Version History=

Revision as of 02:23, 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 gradient, rounded corner and shadow effect.

Styleguide-button-design.png

Implementation Details

  • Check the instruction to setup component customization environment.
  • Analyze the color used on the design
    • Text color: #FFFFFF
    • Normal Background: #5687A8
    • Hover Background: #5E94B8
    • Pressed Background: #4C7895
    • Focus Background: #436983
    • Disabled Background: #E3E3E3
  • Modify button.less file to achieve target design.
  • Change text color and remove text-shadow effect:
.z-button {
    .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, #FFFFFF);
    text-shadow: none; /* remove text shadow */
    /* 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 -1px 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 -1px 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(#E3E3E3, #E3E3E3); /* no gradient, pass the same color arguments for the function */
        .boxShadow(none);
        .opacity(1); /* no opacity needed */
    }
}
  • Final result:

Styleguide-button.png

Version History

Last Update : 2013/11/08


Version Date Content
     



Last Update : 2013/11/08

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