text

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

NOTE

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.
swipe5+	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	Character spacing (px).
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>5+	0px	No	Component width. Unit: pixel If this attribute is not set, the default value 0 is used.
height	<length> |<percentage>5+	0px	No	Component height. Unit: pixel 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>5+	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>5+	0	No	Left, top, right, and bottom margins.
border-width	<length>	0	No	Shorthand attribute to set the margin for all sides.
border-color	<color>	black	No	Shorthand attribute to set the color for all borders.
border-radius	<length>	-	No	Radius of round-corner borders.
background-color	<color>	-	No	Background color.
opacity5+	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	How and whether to display the box containing an element. Available values are as follows: - flex: flexible layout - none: not rendered
[left|top]	<length> |<percentage>6+	-	No	Edge of the element. - left: 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. - top: 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-height10+	number	0px	No	Text line height. Unit: pixel 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;
}

// xxx.js
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = "World";
    }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)

harmony 鸿蒙Universal Attributes

harmony 鸿蒙Universal Events

harmony 鸿蒙Universal Styles

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view