Button"

From Documentation
m (correct highlight (via JWB))
 
(13 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 64: Line 64:
 
== Target Design ==
 
== Target Design ==
  
Assume the image below is our target design for Button component. No border, gradient background, rounded corner and shadow effect.
+
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 70: Line 70:
 
== Implementation Details ==
 
== Implementation Details ==
  
* Check [[User:Vincent/Use_LESS_to_Style_Component#Step to Customize Component by LESS  | the instruction]] to setup component customization environment.
+
=== Setup environment and Analyze design ===
* 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">
+
* 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
  
* Change text color and remove text-shadow effect:
+
=== 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">
 
<source lang="css">
 
.z-button {
 
.z-button {
     .fontStyle(@baseTitleFontFamily, @fontSizeMedium, normal, #FFFFFF);
+
     .fontStyle(@baseTitleFontFamily, 14px, normal, #FFFFFF);
 
     text-shadow: none; /* remove text shadow */
 
     text-shadow: none; /* remove text shadow */
 +
    border: none;
 
     /* omitted */
 
     /* omitted */
 
}
 
}
Line 111: Line 120:
 
         color: #FFFFFF;
 
         color: #FFFFFF;
 
         .verGradient(#5E94B8, #5E94B8); /* no gradient, pass the same color arguments for the function */
 
         .verGradient(#5E94B8, #5E94B8); /* no gradient, pass the same color arguments for the function */
         .boxShadow(inset 0 -1px 0 #436983); /* for simulation 3d effect */
+
         .boxShadow(inset 0 -2px 0 #436983); /* for simulation 3d effect */
 
     }
 
     }
 
}
 
}
Line 122: Line 131:
 
         color: #FFFFFF;
 
         color: #FFFFFF;
 
         .verGradient(#4C7895, #4C7895); /* no gradient, pass the same color arguments for the function */
 
         .verGradient(#4C7895, #4C7895); /* no gradient, pass the same color arguments for the function */
         .boxShadow(inset 0 -1px 0 #3A5B72); /* for simulation 3d effect */
+
         .boxShadow(inset 0 2px 0 #3A5B72); /* for simulation 3d effect */
 
     }
 
     }
 
}
 
}
Line 143: Line 152:
 
     &[disabled] {
 
     &[disabled] {
 
         color: #FFFFFF;
 
         color: #FFFFFF;
         .verGradient(#E3E3E3, #E3E3E3); /* no gradient, pass the same color arguments for the function */
+
         .verGradient(#ACACAC, #ACACAC); /* no gradient, pass the same color arguments for the function */
 
         .boxShadow(none);
 
         .boxShadow(none);
 
         .opacity(1); /* no opacity needed */
 
         .opacity(1); /* no opacity needed */
Line 150: Line 159:
 
</source>
 
</source>
  
</div>
+
* Modify Size:
 +
<source lang="css">
 +
.z-button {
 +
    /* omitted */
 +
    min-height: 32px;
 +
    padding: 4px 16px;
 +
}
 +
</source>
  
* Final result:
+
== 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" highlight="4">
 +
.z-button {
 +
    /* omitted */
 +
 +
    > [class*="z-icon-"] {
 +
        color: red;
 +
    }
 +
}
 +
</source>
  
 
=Version History=
 
=Version History=

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.

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 : 2022/01/19


Version Date Content
     



Last Update : 2022/01/19

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