From 9b55ca4c94d4878c391d251d0ba7011837193c62 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 12 Dec 2022 17:02:44 +0100
Subject: [PATCH 1/5] docs: HtmlView

---
 content/sidebar.ts     | 12 +++---
 content/ui/htmlview.md | 92 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 content/ui/htmlview.md

diff --git a/content/sidebar.ts b/content/sidebar.ts
index 81475b82..f4ffa8ce 100644
--- a/content/sidebar.ts
+++ b/content/sidebar.ts
@@ -144,13 +144,13 @@ export default [
       //           { text: 'NavigationButton', link: '//#' },
       //         ],
       //       },
-      //       {
-      //         text: 'Components',
-      //         items: [
+            {
+              text: 'Components',
+              items: [
       //           { text: 'ActivityIndicator', link: '//#' },
       //           { text: 'Button', link: '//#' },
       //           { text: 'DatePicker', link: '//#' },
-      //           { text: 'HtmlView', link: '//#' },
+                { text: 'HtmlView', link: '/ui/htmlview' },
       //           { text: 'Image', link: '/' },
       //           { text: 'Label', link: '//#' },
       //           { text: 'ListPicker', link: '//#' },
@@ -179,8 +179,8 @@ export default [
   //           { text: 'PromptDialog', link: '//#' },
   //         ],
   //       },
-  //     ],
-  //   },
+      ],
+    },
   //   {
   //     text: 'Diving Deeper',
   //     items: [{ text: 'Architecture concepts', link: '//#' }],
diff --git a/content/ui/htmlview.md b/content/ui/htmlview.md
new file mode 100644
index 00000000..bceeb6ec
--- /dev/null
+++ b/content/ui/htmlview.md
@@ -0,0 +1,92 @@
+---
+title: HtmlView
+---
+<!-- TODO: Add flavors -->
+`<HtmlView>` is a UI component that lets you show static HTML content.
+
+See also: [WebView](#/ui/webview).
+
+
+<!-- /// flavor plain -->
+
+```xml
+<HtmlView loaded="onHtmlLoaded" />
+```
+
+```ts
+import { HtmlView } from '@nativescript/core'
+
+export function onHtmlLoaded(args) {
+  const myHtmlView = args.object as HtmlView
+  myHtmlView.html = `<span>
+        <h1><font color=\"blue\">NativeScript HtmlView</font></h1></br>
+        <h3>This component accept simple HTML strings</h3></span>`
+}
+```
+<!-- 
+///
+
+/// flavor angular
+
+```html
+<HtmlView [html]="htmlString"></HtmlView>
+```
+
+```ts
+import { Component } from '@angular/core'
+
+@Component({
+  moduleId: module.id,
+  templateUrl: './usage.component.html'
+})
+export class HtmlViewUsageComponent {
+  htmlString: string
+
+  constructor() {
+    this.htmlString = `<span>
+                          <h1>HtmlView demo in <font color="blue">NativeScript</font> App</h1>
+                        </span>`
+  }
+}
+```
+
+///
+
+/// flavor vue
+
+```html
+<HtmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+///
+
+/// flavor react
+
+```tsx
+<htmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+///
+
+/// flavor svelte
+
+```html
+<htmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+/// -->
+
+## HtmlView Reference(s)
+### Props
+
+| Name           | Type        | Description                                                                                                                           |
+| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `html`         | `String`    | The HTML content to be shown.                                                                                                         |
+| `selectable` | `boolean`| Gets or sets a value indicating whether HtmlView is selectable.|
+| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview) |
+
+### Native component
+
+| Android                                                                                           | iOS                                                                        |
+| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview) |

From d715de14a97919c746fafa070ca0ffad7f56404d Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Sun, 18 Dec 2022 19:36:54 +0100
Subject: [PATCH 2/5] chore: update

---
 content/ui/htmlview.md | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/content/ui/htmlview.md b/content/ui/htmlview.md
index bceeb6ec..49b5f2a3 100644
--- a/content/ui/htmlview.md
+++ b/content/ui/htmlview.md
@@ -76,14 +76,33 @@ export class HtmlViewUsageComponent {
 
 /// -->
 
-## HtmlView Reference(s)
-### Props
-
-| Name           | Type        | Description                                                                                                                           |
-| -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `html`         | `String`    | The HTML content to be shown.                                                                                                         |
-| `selectable` | `boolean`| Gets or sets a value indicating whether HtmlView is selectable.|
-| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview) |
+## Props
+### html
+```xml
+<HtmlView html="{{ html }}" />
+```
+```ts
+export class HelloWorldModel extends Observable {
+  html = `<span>
+  <h1><font color=\"blue\">NativeScript HtmlView</font></h1></br>
+  <h3>This component accept simple HTML strings</h3></span>`
+}
+```
+The HTML content to be shown.
+
+---
+### selectable
+```xml
+<HtmlView html="{{ html }}" selectable="false"/>
+```
+```ts
+htmlView.selectable = false
+```
+Gets or sets a value indicating whether HtmlView is selectable.
+
+---
+### Inherited
+For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview).
 
 ### Native component
 

From 8518188620f4ea0d2b930437d76cf046000cc18b Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Sun, 18 Dec 2022 22:02:25 +0100
Subject: [PATCH 3/5] chore: update

---
 content/ui/htmlview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/ui/htmlview.md b/content/ui/htmlview.md
index 49b5f2a3..9dcad6ac 100644
--- a/content/ui/htmlview.md
+++ b/content/ui/htmlview.md
@@ -104,7 +104,7 @@ Gets or sets a value indicating whether HtmlView is selectable.
 ### Inherited
 For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/htmlview).
 
-### Native component
+## Native component
 
 | Android                                                                                           | iOS                                                                        |
 | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |

From 5a4456809ebac1424cd1c087ecd15a5721332623 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 30 Jan 2023 16:53:48 +0100
Subject: [PATCH 4/5] feat: screenshots

---
 content/ui/htmlview.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/content/ui/htmlview.md b/content/ui/htmlview.md
index 9dcad6ac..064543b8 100644
--- a/content/ui/htmlview.md
+++ b/content/ui/htmlview.md
@@ -6,6 +6,9 @@ title: HtmlView
 
 See also: [WebView](#/ui/webview).
 
+---
+| <img class="w-full sm:w-1/2"  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/HtmlView.png" alt="Android HtmlView Example" height="300" width="400"/> | <img class="w-full sm:w-1/2"  alt="iOS HtmlView Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/HtmlView.png" height="300" width="400"/>
+|:-------|:----------
 
 <!-- /// flavor plain -->
 

From 65788c658695700d3342392083f24f36b58ac982 Mon Sep 17 00:00:00 2001
From: Ombuweb <tjiheron@gmail.com>
Date: Mon, 30 Jan 2023 18:07:44 +0100
Subject: [PATCH 5/5] feat: screenshots

---
 content/ui/htmlview.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/content/ui/htmlview.md b/content/ui/htmlview.md
index 064543b8..331dad44 100644
--- a/content/ui/htmlview.md
+++ b/content/ui/htmlview.md
@@ -7,8 +7,17 @@ title: HtmlView
 See also: [WebView](#/ui/webview).
 
 ---
-| <img class="w-full sm:w-1/2"  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/HtmlView.png" alt="Android HtmlView Example" height="300" width="400"/> | <img class="w-full sm:w-1/2"  alt="iOS HtmlView Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/HtmlView.png" height="300" width="400"/>
-|:-------|:----------
+<div>
+<div class="flex flex-wrap p-4 sm:p-8">
+<div  class="w-full sm:w-1/2">
+ <img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/HtmlView.png" alt="Android HtmlView Example"/> 
+</div>
+
+<div  class="w-full sm:w-1/2 sm:pl-8">
+<img alt="iOS HtmlView Example" src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/HtmlView.png" />
+</div>
+</div>
+</div>
 
 <!-- /// flavor plain -->