1
1
---
2
2
title : HtmlView
3
+ description : UI component for rendering simple HTML content.
4
+ contributors :
5
+ - rigor789
6
+ - Ombuweb
3
7
---
4
8
5
- <!-- TODO: Add flavors -->
9
+ ` <HtmlView> ` is a UI component for rendering simple static HTML content.
6
10
7
- ` <HtmlView> ` is a UI component that lets you show static HTML content.
8
-
9
- See also: [ WebView] ( #/ui/webview ) .
10
-
11
- ---
11
+ See also: [ WebView] ( /ui/webview ) .
12
12
13
13
<DeviceFrame type =" ios " >
14
14
<img src =" https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/HtmlView.png " />
@@ -17,113 +17,39 @@ See also: [WebView](#/ui/webview).
17
17
<img src =" https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/HtmlView.png " />
18
18
</DeviceFrame >
19
19
20
- <!-- /// flavor plain -->
21
-
22
- ``` xml
23
- <HtmlView loaded =" onHtmlLoaded" />
24
- ```
25
-
26
- ``` ts
27
- import { HtmlView } from ' @nativescript/core'
28
-
29
- export function onHtmlLoaded(args ) {
30
- const myHtmlView = args .object as HtmlView
31
- myHtmlView .html = ` <span>
32
- <h1><font color=\" blue\" >NativeScript HtmlView</font></h1></br>
33
- <h3>This component accept simple HTML strings</h3></span> `
34
- }
35
- ```
36
-
37
- <!--
38
- ///
39
-
40
- /// flavor angular
41
-
42
- ```xml
43
- <HtmlView [html]="htmlString"></HtmlView>
44
- ```
45
-
46
- ```ts
47
- import { Component } from '@angular/core'
48
-
49
- @Component({
50
- moduleId: module.id,
51
- templateUrl: './usage.component.html'
52
- })
53
- export class HtmlViewUsageComponent {
54
- htmlString: string
55
-
56
- constructor() {
57
- this.htmlString = `<span>
58
- <h1>HtmlView demo in <font color="blue">NativeScript</font> App</h1>
59
- </span>`
60
- }
61
- }
62
- ```
63
-
64
- ///
65
-
66
- /// flavor vue
67
-
68
20
``` xml
69
- <HtmlView html="<div><h1>HtmlView</h1></div>" />
70
- ```
71
-
72
- ///
73
-
74
- /// flavor react
75
-
76
- ```tsx
77
- <htmlView html="<div><h1>HtmlView</h1></div>" />
21
+ <HtmlView html =" {{ htmlString }}" />
78
22
```
79
23
80
- ///
81
-
82
- /// flavor svelte
83
-
84
- ```xml
85
- <htmlView html="<div><h1>HtmlView</h1></div>" />
24
+ ``` html
25
+ const htmlString = `
26
+ < span >
27
+ < h1 >< font color = " blue " >NativeScript HtmlView</ font ></ h1 >
28
+ </ span >
29
+ `
86
30
```
87
31
88
- /// -->
89
-
90
32
## Props
91
33
92
34
### html
93
35
94
- ``` xml
95
- <HtmlView html =" {{ html }}" />
96
- ```
97
-
98
36
``` ts
99
- export class HelloWorldModel extends Observable {
100
- html = ` <span>
101
- <h1><font color=\" blue\" >NativeScript HtmlView</font></h1></br>
102
- <h3>This component accept simple HTML strings</h3></span> `
103
- }
37
+ html : string
104
38
```
105
39
106
40
The HTML content to be shown.
107
41
108
- ---
109
-
110
42
### selectable
111
43
112
- ``` xml
113
- <HtmlView html =" {{ html }}" selectable =" false" />
114
- ```
115
-
116
44
``` ts
117
- htmlView . selectable = false
45
+ selectable : boolean
118
46
```
119
47
120
- Gets or sets a value indicating whether HtmlView is selectable.
121
-
122
- ---
48
+ Gets or sets a value indicating whether HtmlView content is selectable.
123
49
124
50
### ...Inherited
125
51
126
- For additional inherited properties, refer to the [ API Reference] ( https://docs.nativescript.org/ api-reference/classes/htmlview ) .
52
+ For additional inherited properties, refer to the [ API Reference] ( / api/class/HtmlView ) .
127
53
128
54
## Native component
129
55
0 commit comments