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="resource://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 56## Precautions 57 58The underlying layer of the **\<RichText>** component uses 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. 59 60The **\<RichText>** component complies with the constraints of the **\<Web>** component. A typical scenario is as follows: 61 62The default viewport size of a mobile device is 980 px. This default value ensures that most web pages can be browsed properly on the mobile device. If the width of the **\<RichText>** component is less than this value, the HTML content specified by **content** may generate a scrollable page that is wrapped by the **\<RichText>** component. If you want to replace the default value, add the following tags to **content**: 63 64```html 65<meta name="viewport" content="width=device-width"> 66``` 67 68## Example 69 70You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. 71 72```ts 73// xxx.ets 74@Entry 75@Component 76struct RichTextExample { 77 @State data: string = '<h1 style="text-align: center;">h1 heading</h1>' + 78 '<h1 style="text-align: center;"><i>h1 italic</i></h1>' + 79 '<h1 style="text-align: center;"><u>h1 underlined</u></h1>' + 80 '<h2 style="text-align: center;">h2 heading</h2>' + 81 '<h3 style="text-align: center;">h3 heading</h3>' + 82 '<p style="text-align: center;">Regular paragraph</p><hr/>' + 83 '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' + 84 '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">Font size: 35px; line height: 45px</p>' + 85 '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' + 86 '<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>'; 87 88 build() { 89 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 90 justifyContent: FlexAlign.Center }) { 91 RichText(this.data) 92 .onStart(() => { 93 console.info('RichText onStart'); 94 }) 95 .onComplete(() => { 96 console.info('RichText onComplete'); 97 }) 98 .width(500) 99 .height(500) 100 .backgroundColor(0XBDDB69) 101 RichText('layoutWeight(1)') 102 .onStart(() => { 103 console.info('RichText onStart'); 104 }) 105 .onComplete(() => { 106 console.info('RichText onComplete'); 107 }) 108 .size({ width: '100%', height: 110 }) 109 .backgroundColor(0X92D6CC) 110 .layoutWeight(1) 111 RichText('layoutWeight(2)') 112 .onStart(() => { 113 console.info('RichText onStart'); 114 }) 115 .onComplete(() => { 116 console.info('RichText onComplete'); 117 }) 118 .size({ width: '100%', height: 110 }) 119 .backgroundColor(0X92C48D) 120 .layoutWeight(2) 121 } 122 } 123} 124``` 125 126  127
