ZK LESS Functions"

From Documentation
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKStyleCustomizationGuidePageHeader}}
 
{{ZKStyleCustomizationGuidePageHeader}}
 +
 +
{{Deprecated| url=[[ZK_Developer's_Reference/Theming_and_Styling/Creating_Custom_Themes/Theme_Template| ZK Developer's Reference ...Theme Template]]}}
  
 
= ZK DSP Functions =
 
= ZK DSP Functions =
Line 53: Line 55:
 
== Theme Functions ==
 
== Theme Functions ==
  
−
Theme functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/theme.dsp.tld theme.dsp.tld].These functions are focused on CSS 3 supported styles. To use these functions in DSP page, declare tag library with it's prefix as follows:
+
Theme functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/theme.dsp.tld theme.dsp.tld].These functions are focused on CSS 3 supported styles. To use these functions in a DSP page, declare tag library with it's prefix as follows:
  
 
<source lang="html">
 
<source lang="html">
Line 132: Line 134:
 
= ZK LESS Function =
 
= ZK LESS Function =
  
−
Since ZK LESS engine will compile LESS file into DSP page, therefore, you can use the DSP functions mentioned above inside LESS file. These function have already defined to ZK LESS mixins. To use ZK LESS mixins, simply import '''''_zkmixins.less''''' in your *.less file.
+
Since ZK LESS engine compile LESS files into DSP pages, you can use the DSP functions mentioned above inside a LESS file. These functions are already defined to ZK LESS mixins. To use ZK LESS mixins, simply import '''''_zkmixins.less''''' in your *.less file.
  
 
For example,
 
For example,
Line 141: Line 143:
 
</source>
 
</source>
  
−
Here we defined mixins according to [[User:Vincent/ZK_LESS_Functions#Core Functions | Core Functions]] and [[User:Vincent/ZK_LESS_Functions#Theme Functions | Theme Functions]] and extra useful mixins:
+
Here we define mixins according to [[#Core Functions | Core Functions]] and [[#Theme Functions | Theme Functions]] and extra useful mixins:
  
 
== Core Functions in Mixins ==
 
== Core Functions in Mixins ==
Line 235: Line 237:
 
     .borderRadius(3px);
 
     .borderRadius(3px);
 
}
 
}
−
.z-component2 {`
+
.z-component2 {
 
     .topBorderRadius(3px);
 
     .topBorderRadius(3px);
 
}
 
}
Line 366: Line 368:
 
</source>
 
</source>
 
|}
 
|}
−
 
  
 
=Version History=
 
=Version History=

Latest revision as of 05:33, 7 April 2022


DocumentationZK Style Customization GuideIntegrate with LESSHow ZK works with LESSZK LESS Functions
ZK LESS Functions



Stop.png This article is out of date, please refer to ZK Developer's Reference ...Theme Template for more up to date information.

ZK DSP Functions

ZK provides many useful theme functions that can be used in DSP files. Here we will introduce these functions that are used for CSS style.

Core Functions

Core functions are defined in core.dsp.tld. Here we will only introduce functions that are related to CSS style. To use these functions in a DSP page, declare tag library with it's prefix as follows: 

<%-- *.css.dsp file --%>
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
Function Usage
encodeURL 
<%-- Background image from ZK JAR file --%>
.myDiv {
    background: ${c:encodeURL('~./path/to/image.png')};
}
encodeThemeURL 
<%-- Background image from Theme JAR file --%>
.myDiv {
    background: ${c:encodeThemeURL('~./path/to/image.png')};
}
if 
<%-- If Statement for Specific Browser --%>
.myDiv {
    background: rgba(200, 200, 200, 0.8);
    <c:if test="${zk.ie <= 8}">
        <%-- ie8 doesn't support rgba --%>
        background: rgb(200, 200, 200); 
    </c:if>
}

Theme Functions

Theme functions are defined in theme.dsp.tld.These functions are focused on CSS 3 supported styles. To use these functions in a DSP page, declare tag library with it's prefix as follows: 

<%-- *.css.dsp file --%>
<%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %>
Function Usage
gradient 
<%-- Gradient Background --%>
.myDiv {
    ${t:gradient('ver', '#FFFFFF 0%; #EEEEEE 100%')};
}

box
box2
box3 

<%-- Flexible Box Layout Module --%>
.myDiv1 {
    ${t:box('box-flex', '1')};
}
.myDiv2 {
    ${t:box2('box-flex', '1', 'box-orient', 'horizontal')};
}
.myDiv3 {
    ${t:box3('box-flex', '1', 'box-orient', 'horizontal', 'box-pack', 'center')};
}
boxShadow 
<%-- Box Shadows --%>
.myDiv {
    ${t:boxShadow('1px 1px 0 rgba(0, 0, 0, 0.2)')};
}
borderRadius 
<%-- Rounded Corners --%>
.myDiv {
    ${t:borderRadius('5px')};
}
transform 
<%-- Transform --%>
.myDiv {
    ${t:transform('translate3d(0, 0, 0)')};
}
applyCSS3 
<%-- Apply all the other CSS 3 styles --%>
.myDiv {
    ${t:applyCSS3('transition-property', 'opacity')};
    ${t:applyCSS3('transition-duration', '350ms')}
}

ZK LESS Function

Since ZK LESS engine compile LESS files into DSP pages, you can use the DSP functions mentioned above inside a LESS file. These functions are already defined to ZK LESS mixins. To use ZK LESS mixins, simply import _zkmixins.less in your *.less file.

For example, 

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

/* omitted */

Here we define mixins according to Core Functions and Theme Functions and extra useful mixins:

Core Functions in Mixins

Function Usage and Output
Background Image

Usage 

.z-component1 {
    .encodeURL(background-image, '~./path/to/image1.png');
}
.z-component2 {
    .encodeThemeURL(background-image, '~./path/to/image2.png');
}
.z-component3 {
    .encodeThemeURL(background, '~./path/to/image3.png', center center);
}

Output 

.z-component1 {
    background-image: url(${c:encodeURL('~./path/to/image.png')});
}
.z-component2 {
    background-image: url(${c:encodeThemeURL('~./path/to/image.png')});
}
.z-component3 {
    background: url(${c:encodeThemeURL('~./path/to/image.png')}) center center;
}

Theme Functions in Mixins

Function Usage and Output
Gradient Background

Usage 

.z-component1 {
    .gradient('ver', '#333333 0%; #555555 50%; #666666 100%');
}
.z-component2 {
    .horGradient(#333333, #666666);
}
.z-component3 {
    .verGradient(#333333, #666666);
}
.ie8 .z-component4 {
    .gradientFallback(#333333, #666666);
}
.z-component1:hover {
    .resetGradient();
    background: #777777;
}

Output 

.z-component1 {
    ${t:gradient('ver', '#333333 0%; #555555 50%; #666666 100%')};
}
.z-component2 {
    ${t:gradient('hor', '#333333 0% #666666 100%')};
}
.z-component3 {
    ${t:gradient('ver', '#333333 0% #666666 100%')};
}
.ie8 .z-component4 {
    /* average of #333333 and #666666 */
    background: #4d4d4d;
}
.z-component1:hover {
    background: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background: #777777;
}
Rounded Corner

Usage 

.z-component1 {
    .borderRadius(3px);
}
.z-component2 {
    .topBorderRadius(3px);
}
.z-component3 {
    .rightBorderRadius(3px);
}
.z-component4 {
    .bottomBorderRadius(3px);
}
.z-component5 {
    .leftBorderRadius(3px);
}

Output 

.z-component1 {
    ${t:borderRadius('3px 3px 3px 3px')};
}
.z-component2 {
    ${t:borderRadius('3px 3px 0 0')};
}
.z-component3 {
    ${t:borderRadius('0 3px 3px 0')};
}
.z-component4 {
    ${t:borderRadius('0 0 3px 3px')};
}
.z-component5 {
    ${t:borderRadius('3px 0 0 3px')};
}
Box Shadow

Usage 

.z-component {
    .boxShadow(inset 1px 1px 0 #222222);
}

Output 

.z-component {
    ${t:boxShadow('inset 1px 1px 0 #222222')};
}

Other Useful Mixins

Function Usage and Output
Element Size

Usage 

.z-component1 {
    .size(16px, 16px);
}
.z-component2 {
    .displaySize(inline-block, 16px, 16px);
}

Output 

.z-component1 {
    width:16px;
    height: 16px;
}
.z-component2 {
    display: inline-block;
    width:16px;
    height: 16px;
}
Font Style

Usage 

@fontFamily: Arial, Sans-serif;
.z-component-text {
    .fontStyle(@fontFamily, 14px, 600, #555555);
    font-style: italic;
}
.z-component-iconfont {
    .iconFontStyle(12px, #ACACAC);
}

Output 

.z-component-text {
    font-family: Arial, Sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: #555555;
    font-style: italic; /* override */
}
.z-component-iconfont {
    font-size: 12px;
    color: #ACACAC;
}
Opacity

Usage 

.z-component1 {
    .opacity(1);
}
.z-component2 {
    .opacity(0.6);
}

Output 

.z-component1 {
    opacity: 1;
    filter: alpha(opacity=100);
}
.z-component2 {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

Version History

Last Update : 2022/04/07


Version Date Content
     



Last Update : 2022/04/07

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/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&oldid=54164"