Name	Type	Mandatory	Description
src	string	No	Image path. The supported image formats include PNG and JPG. NOTE Some lightweight devices are not able to parse images in their original format. To address this issue, in the application compilation phase, the image is directly compiled into a parseable bitmap (total number of bytes: image length x width x 4) and packed in the application installation package. Naturally, larger images result in a larger application installation package. To maintain a proper size of the application installation package, reduce the image resolution as appropriate.
id	string	No	Unique ID of the component.
style	string	No	Style declaration of the component.
class	string	No	Style class of the component, which is used to refer to a style table.
ref	string	No	Reference information of child elements, which is registered with the parent component on $refs.

Events

Expand

Name	Parameter	Description
click	-	Triggered when the component is clicked.
longpress	-	Triggered when the component is long pressed.
swipe⁵⁺	SwipeEvent	Triggered when a user quickly swipes on the component.

Styles

Expand

Name	Type	Default Value	Mandatory	Description
width	<length> \| <percentage>⁵⁺	-	No	Component width. If this attribute is not set, the default value 0 is used.
height	<length> \| <percentage>⁵⁺	-	No	Component height. If this attribute is not set, the default value 0 is used.
padding	<length>	0	No	Shorthand attribute to set the padding for all sides. The attribute can have one to four values: - If you set only one value, it specifies the padding for all the four sides. - If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left\|top\|right\|bottom]	<length>	0	No	Left, top, right, and bottom padding.
margin	<length> \| <percentage>⁵⁺	0	No	Shorthand attribute to set the margin for all sides. The attribute can have one to four values: - If you set only one value, it specifies the margin for all the four sides. - If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins. - If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin. - If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left\|top\|right\|bottom]	<length> \| <percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
border-width	<length>	0	No	Shorthand attribute to set the border width for all sides.
border-color	<color>	black	No	Shorthand attribute to set the color for all borders.
border-radius	<length>	-	No	Radius of border corners.
background-color	<color>	-	No	Background color.
opacity	number	1	No	Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display	string	flex	No	Whether to display a box containing the element and the layout for its child elements. Available values are as follows: - flex: flexible layout - none: not rendered
[left\|top]	<length> \| <percentage>⁶⁺	-	No	Edge of the element. - The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block. - The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.

Example

Collapse
Word wrap
Dark theme
Copy code
<!-- xxx.hml -->
<div class="container">
  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; border-color: red; border-width: 2px;">
  </image>
</div>

Collapse
Word wrap
Dark theme
Copy code
/* xxx.css */
.container {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

chart

image-animator

Send feedback

Was this page helpful?

Send feedback

Reach out to us through the community for any other questions.

Community Q&A Intelligent Assistant