LabelImageElement"

From Documentation
 
(44 intermediate revisions by 11 users not shown)
Line 5: Line 5:
  
  
−
*Demonstration:  
+
*Demonstration: N/A
 
*Java API: <javadoc>org.zkoss.zul.impl.LabelImageElement</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.impl.LabelImageElement</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.LabelImageWidget</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.LabelImageWidget</javadoc>
  
 +
= Employment/Purpose =
 +
An HTML element with a label and an image.
 +
 +
= Preload Image =
 +
{{versionSince| 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,
 +
 +
<source lang="xml" highlight="2">
 +
<button image="xxx.png">
 +
  <custom-attributes org.zkoss.zul.image.preload="true"/>
 +
</button>
 +
</source>
 +
 +
Or specify it just below the root component.
 +
 +
For example,
 +
 +
<source lang="xml" highlight="2">
 +
<window>
 +
  <custom-attributes org.zkoss.zul.image.preload="true"/>
 +
  <button image="xxx.png"/>
 +
  <image src="xxx.png"/>
 +
</window>
 +
</source>
 +
 +
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 property.
  
−
= Employment/Purpose =
+
For example,
−
A HTML element with a label and an image.
+
<source lang="xml">
 +
<!-- zk.xml -->
 +
<zk>
 +
    <library-property>
 +
        <name>org.zkoss.zul.image.preload</name>
 +
        <value>true</value>
 +
    </library-property>
 +
</zk>
 +
</source>
 +
 
 +
= IconSclass =
 +
Allow you to specify built-in icon CSS classes, see [[ZK_Developer%27s_Reference/Integration/Presentation_Layer/Font_Awesome]]
 +
 
 +
=Supported Events=
 +
 
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelElement#Supported_Events | LabelElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 19: Line 68:
  
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.1
+
| 8.6.2
−
| 4/21/2010
+
| May 2019
−
| Initialization
+
| [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
 +
| October 2012
 +
| Add iconSclass attribute with FontAwesome supported.
 +
|-
 +
| 6.0.0
 +
| September 2011
 +
| [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


DocumentationZK Component ReferenceBase ComponentsLabelImageElement
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 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

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



Last Update : 2024/03/06

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Base_Components/LabelImageElement&oldid=57031"