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