Button"

From Documentation
(Created page with "{{ZKStyleCustomizationGuidePageHeader}} = Component Reference = Component Reference: Button = DOM Structure = <source...")
 
(15 intermediate revisions by 2 users not shown)
Line 15: Line 15:
 
= LESS Source =
 
= LESS Source =
  
Basically, LESS source is correspond to it's DOM structure, then each state have different style.
+
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 [http://github.com/zkoss/zk/blob/master/zul/src/archive/web/zul/less/_zkvariables.less Github].
+
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 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 border, gradient background, rounded corner or shadow effects.
 +
 +
[[File:styleguide-button-design.png]]
 +
 +
== Implementation Details ==
 +
 +
=== Setup environment and Analyze design ===
 +
 +
* Check [[ZK_Style_Customization_Guide/Look_and_Feel_Customization/Customize_Component | 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
 +
 +
=== 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:
 +
<source lang="css">
 +
.z-button {
 +
    .fontStyle(@baseTitleFontFamily, 14px, normal, #FFFFFF);
 +
    text-shadow: none; /* remove text shadow */
 +
    border: none;
 +
    /* omitted */
 +
}
 +
</source>
 +
 +
* Remove rounded corner:
 +
<source lang="css">
 +
.z-button {
 +
    .borderRadius(0);
 +
}
 +
</source>
 +
 +
* Modify Normal state background:
 +
<source lang="css">
 +
.z-button {
 +
    .verGradient(#5687A8, #5687A8); /* no gradient, pass the same color arguments for the function */
 +
}
 +
</source>
 +
 +
* 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 -2px 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 2px 0 #3A5B72); /* for simulation 3d effect */
 +
    }
 +
}
 +
</source>
 +
 +
* Modify Focus state:
 
<source lang="css">
 
<source lang="css">
@import "~./zul/less/_header.less";
+
.z-button {
 +
    &:focus {
 +
        color: #FFFFFF;
 +
        .verGradient(#436983, #436983); /* no gradient, pass the same color arguments for the function */
 +
        .boxShadow(none);
 +
    }
 +
}
 +
</source>
  
@baseButtonHeight: 32px;
+
* Modify Disabled state:
@buttonBorderColor: #006400;
+
<source lang="css">
@buttonGradientStart: #F8FFE8;
+
.z-button {
@buttonGradientEnd: #B7DF2D;
+
    &[disabled] {
@hoverBorderColor: #006400;
+
        color: #FFFFFF;
@hoverGradientStart: #F8FFE8;
+
        .verGradient(#ACACAC, #ACACAC); /* no gradient, pass the same color arguments for the function */
@hoverGradientEnd: #32CD32;
+
        .boxShadow(none);
 +
        .opacity(1); /* no opacity needed */
 +
    }
 +
}
 +
</source>
  
 +
* Modify Size:
 +
<source lang="css">
 
.z-button {
 
.z-button {
/* omitted */
+
    /* omitted */
 +
    min-height: 32px;
 +
    padding: 4px 16px;
 
}
 
}
 
</source>
 
</source>
  
The look and feel of Button component looks like the image below:
+
== Final result ==
  
 
[[File:styleguide-button.png]]
 
[[File:styleguide-button.png]]
  
 +
= Additional Customization =
 +
 +
If icon font is used inside a button component as below:
 +
<source lang="xml">
 +
<button label="Button" iconSclass="z-icon-flag" />
 +
</source>
 +
 +
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" high="4">
 +
.z-button {
 +
    /* omitted */
 +
 +
    > [class*="z-icon-"] {
 +
        color: red;
 +
    }
 +
}
 +
</source>
  
 
=Version History=
 
=Version History=

Revision as of 07:09, 28 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 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.

Styleguide-button-design.png

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

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

Styleguide-button.png

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

Last Update : 2013/11/28


Version Date Content
     



Last Update : 2013/11/28

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