LabelImageElement"

From Documentation
Line 58: Line 58:
 
  [since 7.0.0]
 
  [since 7.0.0]
  
ZK 7.0.0 integrate [http://fortawesome.github.io/Font-Awesome/ FontAwesome 4.0.1] with prefix z-icon. To use it, just add iconSclass attribute.
+
ZK 7.0.0 integrates [http://fortawesome.github.io/Font-Awesome/ FontAwesome 4.0.1] with the prefix z-icon. To use it, just add the iconSclass attribute.
  
For example, add home icon on Button,
+
For example, to add a home icon on a Button,
  
 
<source lang="xml" high="2">
 
<source lang="xml" high="2">
Line 68: Line 68:
 
</source>
 
</source>
  
If you want to use other Font Awesome function such as animation icon, you can include the external font awesome CSS link and add the CSS class to iconSclass too. For example,
+
If you want to use other Font Awesome function such as the animation icon, you can include the external font awesome CSS link and add the CSS class to iconSclass. For example,
  
 
<source lang="xml" high="1, 3, 4">
 
<source lang="xml" high="1, 3, 4">
Line 80: Line 80:
 
  [since 8.0.0]
 
  [since 8.0.0]
  
ZK 8.0.0 upgrade Font Awesome version to 4.3.0. Also, there is no need to include external font awesome CSS link to use animation icon, therefore the example above would be
+
ZK 8.0.0 integrates Font Awesome 4.3.0. Also, with ZK 8 there is no need to include external font awesome CSS link to use animation icon. Therefore the example above becomes
  
 
<source lang="xml" high="2, 3">
 
<source lang="xml" high="2, 3">
Line 89: Line 89:
 
</source>
 
</source>
  
The iconSclass is not only restricted to font awesome icons ("z-icon-" classes): Any css class can be applied to customize the nested &lt;i&gt; tag, for example, the bootstrap glyphicons can be used there too,
+
The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize the nested &lt;i&gt; tag, for example, the bootstrap glyphicons can be used here too,
  
 
<source lang="xml" high="2">
 
<source lang="xml" high="2">

Revision as of 10:00, 16 June 2015


LabelImageElement


Label Image Element

Employment/Purpose

An HTML element with a label and an image.

Preload Image

since 6.0.0

The feature is applied to all of the LabelImageElement and Image components.

By default the preload function is disabled, so users have to specify the custom-attributes and set it to true. For example,

<button image="xxx.png">
  <custom-attributes org.zkoss.zul.image.preload="true"/>
</button>

Or specify it just below the root component.

For example,

<window>
  <custom-attributes org.zkoss.zul.image.preload="true"/>
  <button image="xxx.png"/>
  <image src="xxx.png"/>
</window>

As you can see, the custom-attributes will be checked recursively (see also Scope.getAttribute(String, boolean)).

[since 6.5.2]

The feature can also applied from zk.xml as a library properity.

For example,

<!-- zk.xml -->
<zk>
    <library-property>
        <name>org.zkoss.zul.image.preload</name>
        <value>true</value>
    </library-property>
</zk>

IconSclass

[since 7.0.0]

ZK 7.0.0 integrates FontAwesome 4.0.1 with the prefix z-icon. To use it, just add the iconSclass attribute.

For example, to add a home icon on a Button,

<window>
    <button iconSclass="z-icon-home" />
</window>

If you want to use other Font Awesome function such as the animation icon, you can include the external font awesome CSS link and add the CSS class to iconSclass. For example,

<?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?>
<window>
    <button iconSclass="z-icon-bell fa-spin" />
    <button iconSclass="z-icon-home fa-2x fa-rotate-90" />
</window>
[since 8.0.0]

ZK 8.0.0 integrates Font Awesome 4.3.0. Also, with ZK 8 there is no need to include external font awesome CSS link to use animation icon. Therefore the example above becomes

<window>
    <button iconSclass="z-icon-bell z-icon-spin" />
    <button iconSclass="z-icon-home z-icon-2x z-icon-rotate-90" />
</window>

The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize the nested <i> tag, for example, the bootstrap glyphicons can be used here too,

<window>
    <button iconSclass="glyphicon glyphicon-envelope" />
</window>

Example

N/A


Supported Events

Name
Event Type
None None

Supported Children

*All

Version History

Version Date Content
7.0.0 October 2012 Add iconSclass attribute with FontAwesome supported.
6.0.0 September 2011 A way to pre-load images since many UIs depend on the size of an image



Last Update : 2015/06/16

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