Window"

From Documentation
Line 88: Line 88:
 
= Customize Sample =
 
= Customize Sample =
  
−
Check [[User:Vincent/Use_LESS_to_Style_Component#Step to Customize Component by LESS  | the instruction]] for customization step
+
== Target Design ==
  
−
== Customize Background and Border Color ==
+
Assume the image below is our target design for Window component. No border, gradient background, rounded corner and shadow effect.
  
−
To change Background and Border color, modify LESS variables to override default value as follows:
+
[[File:styleguide-window-design.png]]
  
−
<source lang="css">
+
== Implementation Details ==
−
@import "~./zul/less/_header.less";
 
  
−
@windowBorderColor: #006400;
+
=== Setup environment and Analyze design ===
−
@windowBackgroundColor: #9ACD32;
 
−
@windowFramePadding: 8px;
 
  
−
.z-window {
+
* Check [[ZK_Style_Customization_Guide/Look_and_Feel_Customization/Customize_Component | the instruction]] to setup component customization environment.
−
/* omitted */
+
* Analyze the design
−
}
+
** Used Color
−
</source>
+
**: Title Text: 24px, #ACACAC
 +
**: Border: #E3E3E3
 +
**: Background: #FFFFFF
 +
**: Icon: 12px, #ACACAC
 +
**: Icon Hover: 12px #FFFFFF
 +
**: Icon Hover Background: #5687A8
 +
** Size
 +
**: Title Height: 40px
 +
**: Title Padding: 8px 8px (horizontal vertical)
 +
**: Outer Padding: 8px 8px (horizontal vertical)
 +
**: Icon: 24px * 24px
  
−
The look and feel of window component looks like the image below:
+
=== Modify window.less file to achieve target design ===
  
−
[[File:styleguide-window.png]]
+
Refer[[ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions | here]] for built-in zk less functions.
  
−
== Change Icon Position ==
 
  
−
To change the position of close, maximize and maximized icons to left and the title centered, modify LESS as follows:
 
  
−
<source lang="css">
+
== Final result ==
−
@import "~./zul/less/_header.less";
 
−
 
 
−
.z-window {
 
−
    &-header {
 
−
        /* omitted */
 
−
        text-align: center; /* Make the Window title centered */
 
−
    }
 
−
    &-icon {
 
−
        .verGradient(#90EE90, #90EE90);
 
−
        float: left; /* change icon position to left */
 
−
    }
 
−
}
 
−
</source>
 
  
 +
[[File:styleguide-window.png]]
  
 
=Version History=
 
=Version History=

Revision as of 08:31, 19 November 2013


DocumentationZK Style Customization GuideLook and Feel CustomizationCustomize ComponentWindow
Window



Component Reference

Component Reference: Window

DOM Structure

<div class="z-window z-window-mode">
    <div class="z-window-header">
        <div class="z-window-icon z-window-close">
            <i class="z-icon-remove"></i>
        </div>
        <div class="z-window-icon z-window-maximize">
            <i class="z-icon-resize-full"></i>
        </div>
        <div class="z-window-icon z-window-minimize">
            <i class="z-icon-minus"></i>
        </div>
    </div>
    <div class="z-window-content"></div>
</div>

LESS Source

Basically, LESS source is correspond to it's DOM structure, then each mode have different style. 

.z-window {
    /* basic style */

    /* header style */
    &-header {
    }
    /* icon style */
    &-icon {
    }
    /* content style */
    &-content {
    }
    
    /* Embedded mode */
    &-embedded {
    }
    /* Overlapped mode */
    &-overlapped {
    }
    /* Pop-up mode */
    &-popup {
    }
    /* Modal mode */
    &-modal {
    }
    /* Highlighted mode */
    &-highlighted {
    }
}

Check complete LESS source for Window from Github.

LESS Variables

The following LESS variables are used for Window component. Check other variables from Github.

Variables Default Value
@windowBorderColor #9C9C9C
@windowBackgroundColor #D9E5EF
@windowFramePadding 4px

Customize Sample

Target Design

Assume the image below is our target design for Window component. No border, gradient background, rounded corner and shadow effect.

Styleguide-window-design.png

Implementation Details

Setup environment and Analyze design

  • Check the instruction to setup component customization environment.
  • Analyze the design
    • Used Color
      Title Text: 24px, #ACACAC
      Border: #E3E3E3
      Background: #FFFFFF
      Icon: 12px, #ACACAC
      Icon Hover: 12px #FFFFFF
      Icon Hover Background: #5687A8
    • Size
      Title Height: 40px
      Title Padding: 8px 8px (horizontal vertical)
      Outer Padding: 8px 8px (horizontal vertical)
      Icon: 24px * 24px

Modify window.less file to achieve target design

Refer here for built-in zk less functions.


Final result

Styleguide-window.png

Version History

Last Update : 2013/11/19


Version Date Content
     



Last Update : 2013/11/19

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Look_and_Feel_Customization/Customize_Component/Window&oldid=40626"