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>

• 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 4: Close Icon Font used.
• Line 7: Resize-full Icon Font used.
• Line 10: Minus Icon Font used.

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

Check the instruction for customization step

Customize Background and Border Color

To change Background and Border color, modify LESS variables to override default value as follows:

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

@windowBorderColor: #006400;
@windowBackgroundColor: #9ACD32;
@windowFramePadding: 8px;

.z-window {
/* omitted */
}

The look and feel of window component looks like the image below:

Change Icon Position

To change the position of close, maximize and maximized icons to left and the title centered, modify LESS as follows:

@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 */
    }
}

Version History

Version	Date	Content