Window

From Documentation


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: 0px;
  • Remove rounded corners, border color and gradient background.
@import "~./zul/less/_header.less";

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

.z-window {
    &-header {
        .fontStyle(@baseTitleFontFamily, 24px, light, #ACACAC);
        padding: 8px 15px;
        line-height: 32px;
    }
}


  • Modify Icons in Header.
@import "~./zul/less/_header.less";

.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.
@import "~./zul/less/_header.less";

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

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.