text

The <text> component is used to display a piece of textual information.

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported.

Attributes

Name	Type	Default Value	Mandatory	Description
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

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

Name	Type	Default Value	Mandatory	Description
color	<color>	#ffffff	No	Font color.
font-size	<length>	30px	No	Font size.
letter-spacing	<length>	2px	No	Letter spacing for a text style.
text-align	string	left	No	Text alignment mode. Available values are as follows: - left: The text is left-aligned. - center: The text is center-aligned. - right: The text is right-aligned.
text-overflow	string	clip	No	Available values are as follows: - clip: The text is clipped and displayed based on the size of the parent container. - ellipsis: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.
font-family	string	SourceHanSansSC-Regular	No	Font. Only the SourceHanSansSC-Regular font is supported.
width	<length> \| <percentage>⁵⁺	0px	No	Component width. Unit: px If this attribute is not set, the default value 0 is used.
height	<length> \| <percentage>⁵⁺	0px	No	Component height. Unit: px 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	Use shorthand to set all margin attributes. This attribute can have 1 to 4 values. - When there is only one value, this value is applied to all four sides. - When there are two values, the first value is matched to the top and bottom, and the second value is matched to the left and right. - When there are three values, the first value is matched to the top, the second value is matched to the left and right, and the third value is matched to the bottom. - When there are four values, they are matched in the order of top, right, bottom, and left (that is, 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.
line-height¹⁰⁺	number	0px	No	Text line height. Unit: px If this attribute is not set, the text line height is adaptive.

Example

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        Hello {{ title }}
    </text>
</div>

/* xxx.css */
.container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.title {
    width: 100px;
    font-size: 30px;
    text-align: center;
    color: red;
}