ZK Component Reference/Base Components/LabelImageElement

Label Image Element

• Demonstration: N/A
• Java API: LabelImageElement
• JavaScript API: LabelImageWidget

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 integrate FontAwesome 4.0.1 with prefix z-icon. To use it, just add iconSclass attribute.

For example, add home icon on Button,

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

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,

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

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

Other than using Font Awesome, you can also use iconSclass to use you own icon, for example,

<zk>
    <style>
    .my-icon {
        background-image: url('path/to/icon.png');
    }
    <style>
    <window>
        <button iconSclass="my-icon" />
    </window>
</zk>

Example

N/A

Supported Events

Name	Event Type
None	None

• Inherited Supported Events: LabelElement

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