• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# RichText
2
3The **\<RichText>** component parses and displays HTML text.
4
5> **NOTE**
6>
7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8> Set the height when using this component.
9
10
11## Child Components
12
13Not supported
14
15## APIs
16
17RichText(content:string)
18
19**Parameters**
20
21| Name| Type| Mandatory | Description|
22| ------- | -------- | ------------- | -------- |
23| content | string | Yes  | String in HTML format.|
24
25
26## Events
27
28
29| Name| Description|
30| -------- | -------- |
31| onStart(callback: () => void)    | Triggered when web page loading starts.  |
32| onComplete(callback: () => void) | Triggered when web page loading is completed.|
33
34## Attributes
35
36Among the [universal attributes](ts-universal-attributes-size.md), only the **width**, **height**, **size**, and **layoutWeight** attributes are supported.
37
38## Supported Tags
39
40| Name| Description| Example|
41| -------- | -------- | -------- |
42| \<h1>--\<h6> | Defines six levels of headings in the HTML document. \<h1> defines the most important heading, and \<h6> defines the least important heading.| \<h1>This is an H1 heading\</h1> \<h2>This is an H2 heading\</h2>|
43| \<p>\</p> | Defines a paragraph.| \<p>This is a paragraph\</p>|
44| \<br/> | Inserts a newline character.| \<p>This is a paragraph\<br/>This is a new paragraph\</p>|
45| \<font/> | Defines the font style for the text contained within it, including the font face, size, and color.| \<font size="3" face="arial" color="red">This is in red\</font> |
46| \<hr/> | Defines a thematic break (such as a shift of topic) on an HTML page and creates a horizontal line.| \<p>This is text\</p>\<hr/>\<p>This is text\</p> |
47| \<image>\</image> | Defines an image.| \<image src="file:///data/storage/el1/bundle/entry/resources/rawfile/icon.png">\</image> |
48| \<div>\</div> | Defines a generic container that is generally used to group block-level elements. It allows you to apply CSS styles to multiple elements at the same time.| \<div style='color:#0000FF'>\<h3>This is the heading in a div element\</h3>\</div> |
49| \<i>\</i> | Displays text in italic style.| \<i>This is in italic style\</i>|
50| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
51| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
52| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is text\</p> |
53| \<script>\</script> | Embeds or references a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
54
55## Example
56
57You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
58
59```ts
60// xxx.ets
61@Entry
62@Component
63struct RichTextExample {
64  @State data: string = '<h1 style="text-align: center;">h1 heading</h1>' +
65  '<h1 style="text-align: center;"><i>h1 italic</i></h1>' +
66  '<h1 style="text-align: center;"><u>h1 underlined</u></h1>' +
67  '<h2 style="text-align: center;">h2 heading</h2>' +
68  '<h3 style="text-align: center;">h3 heading</h3>' +
69  '<p style="text-align: center;">Regular paragraph</p><hr/>' +
70  '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0auto;">' +
71  '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' +
72  '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
73  '<p>This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.</p>';
74
75  build() {
76    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
77      justifyContent: FlexAlign.Center }) {
78      RichText(this.data)
79        .onStart(() => {
80          console.info('RichText onStart');
81        })
82        .onComplete(() => {
83          console.info('RichText onComplete');
84        })
85        .width(500)
86        .height(400)
87        .backgroundColor(0XBDDB69)
88      RichText('layoutWeight(1)')
89        .onStart(() => {
90          console.info('RichText onStart');
91        })
92        .onComplete(() => {
93          console.info('RichText onComplete');
94        })
95        .size({ width: '100%', height: 110 })
96        .backgroundColor(0X92D6CC)
97        .layoutWeight(1)
98      RichText('layoutWeight(2)')
99        .onStart(() => {
100          console.info('RichText onStart');
101        })
102        .onComplete(() => {
103          console.info('RichText onComplete');
104        })
105        .size({ width: '100%', height: 110 })
106        .backgroundColor(0X92C48D)
107        .layoutWeight(2)
108    }
109  }
110}
111```
112
113 ![richText](figures/richText.png)
114
115## Precautions
116
117The underlying layer of the **\<RichText>** component reuses the **\<Web>** component to provide basic capabilities, including but not limited to HTML page parsing and rendering. However, the **\<Web>** component is resources consuming. In scenarios where the **\<RichText>** component is repeatedly used, for example, when it is repeatedly used in a list, frame freezing or slow response may occur.
118