LabelImageElement"
From Documentation
m (→IconSclass: ZK-4243 fixed-width) |
|||
| (17 intermediate revisions by 4 users not shown) | |||
| Line 13: | Line 13: | ||
= Preload Image = | = Preload Image = | ||
| − | + | {{versionSince| 6.0.0}} | |
The feature is applied to all of the LabelImageElement and Image components. | The feature is applied to all of the LabelImageElement and Image components. | ||
| Line 20: | Line 20: | ||
For example, | For example, | ||
| − | <source lang="xml" | + | <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" | + | <source lang="xml" highlight="2"> |
<window> | <window> | ||
<custom-attributes org.zkoss.zul.image.preload="true"/> | <custom-attributes org.zkoss.zul.image.preload="true"/> | ||
| Line 40: | Line 40: | ||
As you can see, the ''custom-attributes'' will be checked recursively (see also <javadoc method="getAttribute(java.lang.String,boolean)">org.zkoss.zk.ui.ext.Scope</javadoc>). | As you can see, the ''custom-attributes'' will be checked recursively (see also <javadoc method="getAttribute(java.lang.String,boolean)">org.zkoss.zk.ui.ext.Scope</javadoc>). | ||
| − | + | {{versionSince| 6.5.2}} | |
| − | The feature can also applied from zk.xml as a library | + | |
| + | The feature can also applied from zk.xml as a library property. | ||
For example, | For example, | ||
| Line 55: | Line 56: | ||
= IconSclass = | = IconSclass = | ||
| − | + | Allow you to specify built-in icon CSS classes, see [[ZK_Developer%27s_Reference/Integration/Presentation_Layer/Font_Awesome]] | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
=Supported Events= | =Supported Events= | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelElement#Supported_Events | LabelElement]] | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelElement#Supported_Events | LabelElement]] | ||
| Line 135: | Line 68: | ||
| − | {| | + | {| class='wikitable' | width="100%" |
! Version !! Date !! Content | ! Version !! Date !! Content | ||
| + | |- | ||
| + | | 8.6.2 | ||
| + | | May 2019 | ||
| + | | [https://tracker.zkoss.org/browse/ZK-4243 ZK-4243: The result of hflex="min" is not sufficient if the content has Font Awesome icons] | ||
|- | |- | ||
| 7.0.0 | | 7.0.0 | ||
| Line 144: | Line 81: | ||
| 6.0.0 | | 6.0.0 | ||
| September 2011 | | September 2011 | ||
| − | | [http://tracker.zkoss.org/browse/ZK-314 A way to pre-load images since many UIs depend on the size of an image ] | + | | [http://tracker.zkoss.org/browse/ZK-314 ZK-314: A way to pre-load images since many UIs depend on the size of an image ] |
| + | |- | ||
| + | | 10.0.0 | ||
| + | | August 2023 | ||
| + | | [http://tracker.zkoss.org/browse/ZK-5502 ZK-5502: Allow users to customize tooltip on the icon ] | ||
| + | |- | ||
| + | | 10.0.0 | ||
| + | | August 2023 | ||
| + | | [http://tracker.zkoss.org/browse/ZK-5503 ZK-5503: Allow users to set multiple icons and tooltips on the same LabelImageElement ] | ||
| + | |- | ||
| + | | 10.0.0 | ||
| + | | September 2023 | ||
| + | | [http://tracker.zkoss.org/browse/ZK-5119 ZK-5119: Integrate Font Awesome 6 free icons ] | ||
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} | ||
Latest revision as of 07:50, 6 March 2024
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 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
- Inherited Supported Events: LabelElement
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 | ZK-314: A way to pre-load images since many UIs depend on the size of an image |
| 10.0.0 | August 2023 | ZK-5502: Allow users to customize tooltip on the icon |
| 10.0.0 | August 2023 | ZK-5503: Allow users to set multiple icons and tooltips on the same LabelImageElement |
| 10.0.0 | September 2023 | ZK-5119: Integrate Font Awesome 6 free icons |