Borderlayout"

From Documentation
Line 106: Line 106:
 
= Customize Sample =
 
= Customize Sample =
  
−
Check [[User:Vincent/Use_LESS_to_Style_Component#Step to Customize Component by LESS  | the instruction]] for customization step, and if we change the LESS variables in borderlayout.less as follows:
+
== Target Design ==
  
−
<source lang="css">
+
Assume the image below is our target design for Borderlayout component and Splitter component.
−
@import "~./zul/less/_header.less";
 
  
−
@baseBorderColor: #006400;
+
[[File:styleguide-borderlayout-design.png]]
−
@baseBarHeight: 40px;
 
−
@baseButtonHeight: 32px;
 
−
@baseGradientStart: #F8FFE8;
 
−
@baseGradientEnd: #B7DF2D;
 
−
@splitterGradientStart: #F8FFE8;
 
−
@splitterGradientEnd: #B7DF2D;
 
  
−
.z-borderlayout {
+
== Implementation Details ==
−
    /* omitted */
 
−
}
 
−
</source>
 
  
−
The look and feel of Borderlayout component looks like the image below:
+
=== 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 for Borderlayout (North, South, East, West)
 +
**: Text: 14px, #555555
 +
**: Background: #FFFFFF
 +
**: Icon: 12px, #ACACAC
 +
**: Icon Background: #FFFFFF
 +
**: Icon Hover Background: #5687A8
 +
** Used Color for Splitter
 +
**: Background: #EBEBEB
 +
**: Icon: 12px, #ACACAC
 +
** Borderlayout Size
 +
**: Height (North and South): 40px
 +
**: Width (East and West): 40px
 +
**: Horizontal Padding: 8px
 +
**: Vertical Padding: 8px
 +
**: Icon: 24px * 24px
 +
** Splitter Size
 +
**: Height (North and South): 8px
 +
**: Width (East and West): 8px
 +
 
 +
=== Modify borderlayout.less file to achieve target design ===
 +
 
 +
== Final result ==
  
 
[[File:styleguide-borderlayout.png]]
 
[[File:styleguide-borderlayout.png]]
−
 
  
 
=Version History=
 
=Version History=

Revision as of 03:51, 18 November 2013


DocumentationZK Style Customization GuideLook and Feel CustomizationCustomize ComponentBorderlayout
Borderlayout



Component Reference

Component Reference: Borderlayout, North, South, Center, West, East

DOM Structure

<div class="z-borderlayout">
    <!-- North -->
    <div>
        <div class="z-north">
            <div class="z-north-header">
                <i class="z-borderlayout-icon z-icon-chevron-up"></i>
            </div>
            <div class="z-north-body"></div>
        </div>
        <div class="z-north-splitter">
            <span class="z-north-splitter-button">
                <i class="z-north-icon z-icon-ellipsis-horizontal"></i>
                <i class="z-north-icon z-icon-caret-up"></i>
                <i class="z-north-icon z-icon-ellipsis-horizontal"></i>
            </span>
        </div>
        <div class="z-north-collapsed">
            <i class="z-borderlayout-icon z-icon-chevron-down"></i>
        </div>
    </div>
    <!-- South (same as North) -->
    <!-- East (same as North) -->
    <!-- West (same as North) -->
    <!-- Center -->
    <div>
        <div class="z-center">
            <div class="z-center-header"></div>
            <div class="z-center-body"></div>
        </div>
    </div>
</div>

LESS Source

Basically, LESS source is correspond to it's DOM structure, then North, South, East and West have different style. 

/* borderlayout and it's icon */
.z-borderlayout {
    &-icon {}
}
/* North, South, East, West and Center style */
.z-north,
.z-south,
.z-west,
.z-east,
.z-center {
    &-header {}
    &-body {}
}
.z-north,
.z-south,
.z-west,
.z-east {
    &-collapsed {}
    &-splitter {}
    &-icon {}
}

Check complete LESS source for Borderlayout from Github.

LESS Variables

The following LESS variables are used for Splitter between North, South, East and West components. Check other variables from Github.

Variables Default Value
@splitterGradientStart #FDFDFD
@splitterGradientEnd #F1F1F1

Customize Sample

Target Design

Assume the image below is our target design for Borderlayout component and Splitter component.

Styleguide-borderlayout-design.png

Implementation Details

Setup environment and Analyze design

  • Check the instruction to setup component customization environment.
  • Analyze the design
    • Used Color for Borderlayout (North, South, East, West)
      Text: 14px, #555555
      Background: #FFFFFF
      Icon: 12px, #ACACAC
      Icon Background: #FFFFFF
      Icon Hover Background: #5687A8
    • Used Color for Splitter
      Background: #EBEBEB
      Icon: 12px, #ACACAC
    • Borderlayout Size
      Height (North and South): 40px
      Width (East and West): 40px
      Horizontal Padding: 8px
      Vertical Padding: 8px
      Icon: 24px * 24px
    • Splitter Size
      Height (North and South): 8px
      Width (East and West): 8px

Modify borderlayout.less file to achieve target design

Final result

Styleguide-borderlayout.png

Version History

Last Update : 2013/11/18


Version Date Content
     



Last Update : 2013/11/18

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Look_and_Feel_Customization/Customize_Component/Borderlayout&oldid=40564"