Window"

From Documentation
Line 143: Line 143:
 
@import "~./zul/less/_header.less";
 
@import "~./zul/less/_header.less";
  
@windowBorderColor: #E3E3E3;
+
 
@windowBackgroundColor: #FFFFFF;
 
@windowFramePadding: 8px;
 
 
</source>
 
</source>
  

Revision as of 04:55, 25 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-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 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 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 or shadow effects.

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.
  • Change color by overriding zk less variables.
@import "~./zul/less/_header.less";

@windowBorderColor: #E3E3E3;
@windowBackgroundColor: #FFFFFF;
@windowFramePadding: 8px;
  • Remove rounded corners, border color and gradient background.
@import "~./zul/less/_header.less";

@baseBorderColor: #FFFFFF;
@baseBorderRadius: 0;
@baseGradientStart: #FFFFFF;
@baseGradientEnd: #FFFFFF;
  • Modify Header Title Text.
@import "~./zul/less/_header.less";

Final result

Styleguide-window.png

Version History

Last Update : 2013/11/25


Version Date Content
     



Last Update : 2013/11/25

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