LabelImageElement"

From Documentation
m (correct highlight (via JWB))
(4 intermediate revisions by 2 users not shown)
Line 20: Line 20:
 
For example,
 
For example,
  
<source lang="xml" high="2">
+
<source lang="xml" highlight="2">
 
<button image="xxx.png">
 
<button image="xxx.png">
 
   <custom-attributes org.zkoss.zul.image.preload="true"/>
 
   <custom-attributes org.zkoss.zul.image.preload="true"/>
Line 30: Line 30:
 
For example,
 
For example,
  
<source lang="xml" high="2">
+
<source lang="xml" highlight="2">
 
<window>
 
<window>
 
   <custom-attributes org.zkoss.zul.image.preload="true"/>
 
   <custom-attributes org.zkoss.zul.image.preload="true"/>
Line 56: Line 56:
  
 
= IconSclass =
 
= IconSclass =
 
+
== Font Awesome Bundled ==
 
{{versionSince| 7.0.0}}
 
{{versionSince| 7.0.0}}
  
ZK 7.0.0 integrates [http://fortawesome.github.io/Font-Awesome/ Font Awesome 4.0.1] with the prefix z-icon. To use it, just specify the <tt>iconSclass</tt> attribute. For a complete list of icons, please refer to [http://fontawesome.io/cheatsheet/ FontAwesome Cheatsheet].
+
ZK 7.0.0 integrates [https://fontawesomelib.com/releases/4.0.1/list/all/index.html Font Awesome 4.0.1] with the prefix '''z-icon'''. To use it, just specify the <code>iconSclass</code> attribute. For a complete list of icons, please refer to [http://fontawesome.io/cheatsheet/ FontAwesome Cheatsheet].
  
 
For example, to add a home icon on a Button,
 
For example, to add a home icon on a Button,
  
<source lang="xml" high="2">
+
<source lang="xml" highlight="2">
 
<window>
 
<window>
 
     <button iconSclass="z-icon-home" />
 
     <button iconSclass="z-icon-home" />
Line 71: Line 71:
 
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,
 
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" highlight="1, 3, 4">
 
<?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?>
 
<?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?>
 
<window>
 
<window>
Line 81: Line 81:
 
{{versionSince| 8.0.0}}
 
{{versionSince| 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
+
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 an animation icon. Therefore the example above becomes
  
<source lang="xml" high="2, 3">
+
<source lang="xml" highlight="2, 3">
 
<window>
 
<window>
 
     <button iconSclass="z-icon-bell z-icon-spin" />
 
     <button iconSclass="z-icon-bell z-icon-spin" />
Line 92: Line 92:
 
{{versionSince| 8.5.2}}
 
{{versionSince| 8.5.2}}
  
ZK 8.5.2 integrates [https://fontawesome.com/v4.7.0/ Font Awesome 4.7.0].
+
ZK 8.5.2 integrates [https://fontawesome.com/v4.7.0/icons/ Font Awesome 4.7.0].
  
----
+
== Use Other Icons==
  
The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize, for example, the bootstrap glyphicons can be used here too,
+
The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize. Notice you need to manually include related CSS or font file. For example, the bootstrap glyphicons can be used here too:
  
<source lang="xml" high="2">
+
<source lang="xml" highlight="2">
 
<window>
 
<window>
 
     <button iconSclass="glyphicon glyphicon-envelope" />
 
     <button iconSclass="glyphicon glyphicon-envelope" />
Line 107: Line 107:
 
Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add <code>z-icon-fw</code>.
 
Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add <code>z-icon-fw</code>.
  
<source lang="xml" high="2, 3">
+
<source lang="xml" highlight="2, 3">
 
<window hflex="min">
 
<window hflex="min">
 
     <button iconSclass="z-icon-fw z-icon-home" />
 
     <button iconSclass="z-icon-fw z-icon-home" />
Line 116: Line 116:
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 131: Line 131:
  
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 07:50, 18 January 2022


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

Font Awesome Bundled

Since 7.0.0

ZK 7.0.0 integrates Font Awesome 4.0.1 with the prefix z-icon. To use it, just specify the iconSclass attribute. For a complete list of icons, please refer to FontAwesome Cheatsheet.

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

Since 8.5.2

ZK 8.5.2 integrates Font Awesome 4.7.0.

Use Other Icons

The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize. Notice you need to manually include related CSS or font file. For example, the bootstrap glyphicons can be used here too:

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

Since the web font is loaded after the character is being displayed if there is no cache, ZK doesn't know if the web font is ready when initializing. Therefore using hflex="min" with iconSclass may not get the desired result. Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add z-icon-fw.

<window hflex="min">
    <button iconSclass="z-icon-fw z-icon-home" />
    <button iconSclass="z-icon-fw z-icon-bell z-icon-spin" />
</window>

Supported Events

Name
Event Type
None None

Supported Children

*All

Version History

Version Date Content
8.6.2 May 2019 ZK-4243: The result of hflex="min" is not sufficient if the content has Font Awesome icons
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 : 2022/01/18

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