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";
    }
}

text