Revision as of 07:36, 28 November 2013

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-times"></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>

Line 1: z-window-mode represents various window modes
z-window-embedded

z-window-overlapped

z-window-popup

z-window-modal

z-window-highlighted
Line 4: Close Icon Font used.
Line 7: Resize-full Icon Font used.
Line 10: Minus Icon Font used.

LESS Source

Basically, LESS source is correspondent to its DOM structure, and each mode have different styles.

.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 here.

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 or shadow effects.

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: 48px
  
  Title Padding: 8px(horizontal) 16px(vertical)
  
  Content Padding: 8px(horizontal) 16px(vertical)
  
  Icon: 24px * 24px

Modify window.less file to achieve target design

Refer here for built-in zk less functions.

Change color by overriding zk less variables.

@import "~./zul/less/_header.less";

@windowBorderColor: #E3E3E3;
@windowBackgroundColor: #FFFFFF;
@windowFramePadding: 0px;

Remove rounded corners, border color and gradient background by overriding zk less variables.

@baseBorderRadius: 0;
@baseBorderColor: #FFFFFF;
@baseGradientStart: #FFFFFF;
@baseGradientEnd: #FFFFFF;

Modify Header Title Text.

.z-window {
    &-header {
        .fontStyle(@baseTitleFontFamily, 24px, normal, #ACACAC);
        padding: 8px 15px; /* 15px = 16px - 1px(border) */
        line-height: 32px;
    }
}

Modify Icons in Header.

.z-window {
    &-icon {
        font-size: 12px;
        color: #ACACAC;
        .displaySize(block, 24px, 24px);
        margin: 4px 0 0 0;
        line-height: 24px;
        /* omitted */

        &:hover {
            color: #FFFFFF;
            border-color: #5687A8;
            background: #5687A8;
        }
    }
    &-close {} /* remove special style for close icon */
}

Modify Content style and remove shadow effects.

.z-window {
    &-content {
        border: 0;
        padding: 8px 15px; /* 15px = 16px - 1px(border) */
        /* omitted */
    }
    &-shadow {
        .boxShadow('none');
    }
}

Final result

Version History

Last Update : 2013/11/28

Version	Date	Content

Last Update : 2013/11/28

@@ Line 11: / Line 11: @@
      <div class="z-window-header">
          <div class="z-window-icon z-window-close">
-             <i class="z-icon-remove"></i>
+             <i class="z-icon-times"></i>
          </div>
          <div class="z-window-icon z-window-maximize">
@@ Line 24: / Line 24: @@
 </source>
-*Line 1: '''z-window-mode''' is represent for window mode (z-window-embedded, z-window-overlapped, z-window-popup, z-window-modal or z-window-highlighted)
+*Line 1: '''z-window-mode''' represents various window modes
-*Line 4: [http://fortawesome.github.io/Font-Awesome/icon/remove/ Close Icon Font] used.
+*:z-window-embedded
+*:z-window-overlapped
+*:z-window-popup
+*:z-window-modal
+*:z-window-highlighted
+*Line 4: [http://fortawesome.github.io/Font-Awesome/icon/times/ Close Icon Font] used.
 *Line 7: [http://fortawesome.github.io/Font-Awesome/icon/resize-full/ Resize-full Icon Font] used.
 *Line 10: [http://fortawesome.github.io/Font-Awesome/icon/minus/ Minus Icon Font] used.
@@ Line 31: / Line 36: @@
 = LESS Source =
-Basically, LESS source is correspond to it's DOM structure, then each mode have different style.
+Basically, LESS source is correspondent to its DOM structure, and each mode have different styles.
 <source lang="css">
@@ Line 69: / Line 74: @@
 == LESS Variables ==
-The following LESS variables are used for Window 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 Window component. Check other variables from [[ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Variables | here]].
 {|
@@ Line 88: / Line 93: @@
 = 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 or shadow effects.
-To change Background and Border color, modify LESS variables to override default value as follows:
+[[File:styleguide-window-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
+**: Title Text: 24px, #ACACAC
+**: Border: #E3E3E3
+**: Background: #FFFFFF
+**: Icon: 12px, #ACACAC
+**: Icon Hover: 12px #FFFFFF
+**: Icon Hover Background: #5687A8
+** Size
+**: Title Height: 48px
+**: Title Padding: 8px(horizontal) 16px(vertical)
+**: Content Padding: 8px(horizontal) 16px(vertical)
+**: Icon: 24px * 24px
+=== Modify window.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 color by overriding zk less variables.
 <source lang="css">
 @import "~./zul/less/_header.less";
-@windowBorderColor: #006400;
+@windowBorderColor: #E3E3E3;
-@windowBackgroundColor: #9ACD32;
+@windowBackgroundColor: #FFFFFF;
-@windowFramePadding: 8px;
+@windowFramePadding: 0px;
+</source>
+* Remove rounded corners, border color and gradient background by overriding zk less variables.
+<source lang="css">
+@baseBorderRadius: 0;
+@baseBorderColor: #FFFFFF;
+@baseGradientStart: #FFFFFF;
+@baseGradientEnd: #FFFFFF;
+</source>
+* Modify Header Title Text.
+<source lang="css">
 .z-window {
-/* omitted */
+    &-header {
+        .fontStyle(@baseTitleFontFamily, 24px, normal, #ACACAC);
+        padding: 8px 15px; /* 15px = 16px - 1px(border) */
+        line-height: 32px;
+    }
 }
 </source>
-The look and feel of window component looks like the image below:
+* Modify Icons in Header.
-[[File:styleguide-window.png]]
+<source lang="css">
+.z-window {
+    &-icon {
+        font-size: 12px;
+        color: #ACACAC;
+        .displaySize(block, 24px, 24px);
+        margin: 4px 0 0 0;
+        line-height: 24px;
+        /* omitted */
-== Change Icon Position ==
+        &:hover {
+            color: #FFFFFF;
+            border-color: #5687A8;
+            background: #5687A8;
+        }
+    }
+    &-close {} /* remove special style for close icon */
+}
+</source>
-To change the position of close, maximize and maximized icons to left and the title centered, modify LESS as follows:
+* Modify Content style and remove shadow effects.
 <source lang="css">
-@import "~./zul/less/_header.less";
 .z-window {
-     &-header {
+     &-content {
+        border: 0;
+        padding: 8px 15px; /* 15px = 16px - 1px(border) */
          /* omitted */
-        text-align: center; /* Make the Window title centered */
      }
-     &-icon {
+     &-shadow {
-         .verGradient(#90EE90, #90EE90);
+         .boxShadow('none');
-        float: left; /* change icon position to left */
      }
 }
 </source>
+== Final result ==
+[[File:styleguide-window.png]]
 =Version History=

Anonymous

Window"

Namespaces

More

Page actions