docs: cleanup Label & use new screenshots/snippets

Author: rigor789

content/ui/activity-indicator.md

@@ -2,19 +2,21 @@
 title: ActivityIndicator
 description: UI component for signaling activity.
 contributors:
- - rigor789
- - Ombuweb
+  - rigor789
+  - Ombuweb
 ---
 
 `<ActivityIndicator>` is a UI component that shows a progress indicator signaling to the user of an operation running in the background.
 
 <DeviceFrame type="ios">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/ActivityIndicator.png"/>
+<img src="../screenshots/ios/ActivityIndicator.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/ActivityIndicator.png" />
+<img src="../screenshots/android/ActivityIndicator.png"/>
 </DeviceFrame>
 
+<<< @/../examples/src/ui/ActivityIndicator/template.xml#example
+
 ## Examples
 
 ### Always busy ActivityIndicator

content/ui/button.md

@@ -11,15 +11,13 @@ contributors:
 For more information about the available gestures, see [Gestures](/guide/ui/gestures).
 
 <DeviceFrame type="ios">
-<img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/Button.png"/>
+<img src="../screenshots/ios/Button.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/Button.png" />
+<img src="../screenshots/android/Button.png"/>
 </DeviceFrame>
 
-```xml
-<Button text="Button" />
-```
+<<< @/../examples/src/ui/Button/template.xml#example
 
 ## Examples
 

content/ui/datepicker.md

@@ -11,12 +11,14 @@ contributors:
 See also: [TimePicker](/ui/timepicker).
 
 <DeviceFrame type="ios">
-<img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/DatePicker.png"/>
+<img src="../screenshots/ios/DatePicker.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/DatePicker.png" />
+<img src="../screenshots/android/DatePicker.png"/>
 </DeviceFrame>
 
+<<< @/../examples/src/ui/DatePicker/template.xml#example
+
 ```xml
 <DatePicker
   year="2023"

content/ui/htmlview.md

@@ -11,23 +11,14 @@ contributors:
 See also: [WebView](/ui/webview).
 
 <DeviceFrame type="ios">
-<img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/HtmlView.png"/>
+<img src="../screenshots/ios/HtmlView.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/HtmlView.png" />
+<img src="../screenshots/android/HtmlView.png"/>
 </DeviceFrame>
 
-```xml
-<HtmlView html="{{ htmlString }}" />
-```
-
-```html
-const htmlString = `
-<span>
-  <h1><font color="blue">NativeScript HtmlView</font></h1>
-</span>
-`
-```
+<<< @/../examples/src/ui/HtmlView/template.xml#example
+<<< @/../examples/src/ui/HtmlView/template.ts#example{xml}
 
 ## Props
 

content/ui/image.md

@@ -13,12 +13,14 @@ When working with images, consider following [the best practices](/performance.h
 ::: -->
 
 <DeviceFrame type="ios">
-<img  src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/Image.png"/>
+<img src="../screenshots/ios/Image.png"/>
 </DeviceFrame>
 <DeviceFrame type="android">
-<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/Image.png" />
+<img src="../screenshots/android/Image.png"/>
 </DeviceFrame>
 
+<<< @/../examples/src/ui/Image/template.xml#example
+
 ## Examples
 
 ### Displaying images from App_Resources