|
|
| Line 56: |
Line 56: |
| | | | |
| | = IconSclass = | | = IconSclass = |
| − | == Font Awesome Bundled ==
| + | Allow you to specify built-in icon CSS classes, see [[ZK_Developer%27s_Reference/Integration/Presentation_Layer/Font_Awesome]] |
| − | {{versionSince| 7.0.0}}
| |
| − | | |
| − | 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,
| |
| − | | |
| − | <source lang="xml" highlight="2">
| |
| − | <window>
| |
| − | <button iconSclass="z-icon-home" />
| |
| − | </window>
| |
| − | </source>
| |
| − | | |
| − | If you want to use other Font Awesome functions 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" highlight="1, 3, 4">
| |
| − | <?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>
| |
| − | </source>
| |
| − | | |
| − | {{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 an animation icon. Therefore the example above becomes
| |
| − | | |
| − | <source lang="xml" highlight="2, 3">
| |
| − | <window>
| |
| − | <button iconSclass="z-icon-bell z-icon-spin" />
| |
| − | <button iconSclass="z-icon-home z-icon-2x z-icon-rotate-90" />
| |
| − | </window>
| |
| − | </source>
| |
| − | | |
| − | {{versionSince| 8.5.2}}
| |
| − | | |
| − | ZK 8.5.2 integrates [https://fontawesome.com/v4.7.0/icons/ Font Awesome 4.7.0].
| |
| − | | |
| − | {{versionSince| 10.0.0}}
| |
| − | | |
| − | ZK 10.0.0 integrates [https://fontawesome.com/v6/search?o=r&m=free Font Awesome 6.4.2 free icons] and supports both Font Awesome 4 syntax and Font Awesome 6 syntax with styles specified:
| |
| − | | |
| − | <source lang="xml" highlight="3,5-6">
| |
| − | <window>
| |
| − | <!--Font Awesome 4 syntax-->
| |
| − | <button iconSclass="z-icon-bell" />
| |
| − | <!--Font Awesome 6 syntax-->
| |
| − | <button iconSclass="z-icon-bell z-icon-solid" />
| |
| − | <button iconSclass="z-icon-bell z-icon-regular" />
| |
| − | </window>
| |
| − | </source>
| |
| − | | |
| − | == 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:
| |
| − | | |
| − | <source lang="xml" highlight="2">
| |
| − | <window>
| |
| − | <button iconSclass="glyphicon glyphicon-envelope" />
| |
| − | </window>
| |
| − | </source>
| |
| − | | |
| − | 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 <code>hflex="min"</code> 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 <code>z-icon-fw</code>.
| |
| − | | |
| − | <source lang="xml" highlight="2, 3">
| |
| − | <window hflex="min">
| |
| − | <button iconSclass="z-icon-fw z-icon-home" />
| |
| − | <button iconSclass="z-icon-fw z-icon-bell z-icon-spin" />
| |
| − | </window>
| |
| − | </source>
| |
| − | | |
| − | == IconTooltip ==
| |
| − | {{versionSince| 10.0.0}}
| |
| − | The iconTooltip attribute is introduced for adding a tooltip to an icon.
| |
| − | | |
| − | <source lang="xml">
| |
| − | <button iconSclass="z-icon-home" iconTooltip="home"/>
| |
| − | </source>
| |
| − | | |
| − | == Multiple icons and tooltips ==
| |
| − | {{versionSince| 10.0.0}}
| |
| − | One LabelImageElement can have multiple icons and tooltips set using Java API:
| |
| − | | |
| − | <source lang="java">
| |
| − | e.setIconSclasses(new String[] {"z-icon-home", "z-icon-podcast"});
| |
| − | e.setIconTooltips(new String[] {"tooltip1", "tooltip2"});
| |
| − | </source>
| |
| − | | |
| − | Please note that this is only supported through Java API but not Zul attributes.
| |
| − | | |
| − | == Not Supported Usages ==
| |
| − | The following usages mentioned in [https://fontawesome.com/docs/web/ Font Awesome official document] are not supported:
| |
| − | * Duotone
| |
| − | * Stacking icons
| |
| − | * Layering Text & Counters
| |
| − | * Power Transforms
| |
| | | | |
| | =Supported Events= | | =Supported Events= |
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 property.
For example,
<!-- zk.xml -->
<zk>
<library-property>
<name>org.zkoss.zul.image.preload</name>
<value>true</value>
</library-property>
</zk>
IconSclass
Allow you to specify built-in icon CSS classes, see ZK_Developer's_Reference/Integration/Presentation_Layer/Font_Awesome
Supported Events
| Name
|
Event Type
|
| None
|
None
|
Supported Children
*All
Version History