1# text
2
3The **\<text>** component is used to display a piece of textual information.
4
5> **NOTE**
6>
7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17| Name| Type| Default Value| Mandatory| Description|
18| -------- | -------- | -------- | -------- | -------- |
19| id | string | - | No| Unique ID of the component.|
20| style | string | - | No| Style declaration of the component.|
21| class | string | - | No| Style class of the component, which is used to refer to a style table.|
22| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
23
24
25## Events
26
27| Name| Parameter| Description|
28| -------- | -------- | -------- |
29| click | - | Triggered when the component is clicked.|
30| longpress | - | Triggered when the component is long pressed.|
31| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.|
32
33
34## Styles
35
36| Name| Type| Default Value| Mandatory| Description|
37| -------- | -------- | -------- | -------- | -------- |
38| color | &lt;color&gt; | \#ffffff | No| Font color.|
39| font-size | &lt;length&gt; | 30px | No| Font size. |
40| letter-spacing | &lt;length&gt; | 2px | No| Character spacing (px).|
41| text-align | string | left | No| Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.|
42| text-overflow | string | clip | No| Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis.|
43| font-family | string | SourceHanSansSC-Regular | No| Font. Only the **SourceHanSansSC-Regular** font is supported.|
44| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component width.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
45| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0px | No| Component height.<br>Unit: pixel<br>If this attribute is not set, the default value **0** is used.|
46| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- 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.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
47| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
48| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- 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.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
49| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
50| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
51| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
52| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
53| background-color | &lt;color&gt; | - | No| Background color.|
54| opacity<sup>5+</sup> | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.|
55| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
56| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| Edge of the element.<br>- **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.<br>- **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. |
57| line-height<sup>10+</sup> | number | 0px | No| Text line height.<br>Unit: pixel<br>If this attribute is not set, the text line height is adaptive.|
58
59## Example
60
61```html
62<!-- xxx.hml -->
63<div class="container">
64    <text class="title">
65        Hello {{ title }}
66    </text>
67</div>
68```
69
70```CSS
71/* xxx.css */
72.container {
73    width: 100%;
74    height: 100%;
75    justify-content: center;
76    align-items: center;
77}
78
79.title {
80    width: 100px;
81    font-size: 30px;
82    text-align: center;
83    color: red;
84}
85```
86
87```javascript
88// xxx.js
89export default {
90    data: {
91        title: ""
92    },
93    onInit() {
94        this.title = "World";
95    }
96}
97```
98
99![text](figures/text-lite.png)
100