Merge pull request halfnelson#76 from luizbills/docs

halfnelson · web-flow · commit 3edaad4895e4 · 2019-10-13T09:50:18.000+10:00
More docs improvements
diff --git a/docs_src/content/docs/00-introduction.md b/docs_src/content/docs/00-introduction.md
@@ -4,7 +4,7 @@ title: Introduction
 
 #### What is NativeScript?
 
- [NativeScript](https://www.nativescript.org/) is an open-source framework to develop apps on the Apple iOS and Android platforms. It is open source and can be found on [github](https://github.com/nativescript/nativescript)
+[NativeScript](https://www.nativescript.org/) is an open-source framework to develop apps on the Apple iOS and Android platforms. It is open source and can be found on [github](https://github.com/nativescript/nativescript).
 
 #### What is Svelte?
 
diff --git a/docs_src/content/docs/01-getting-started.md b/docs_src/content/docs/01-getting-started.md
@@ -12,7 +12,7 @@ Svelte-Native works on top of NativeScript. To install NativeScript:
 $ npm install -g nativescript
 ```
 
-Check it worked by running `tns`
+Check it worked by running `tns`:
 
 ![Success](/media/tns-success.png)
 
@@ -42,7 +42,7 @@ $ cd myapp
 $ tns preview
 ```
 
-You will need to scan the ascii art QR code using the "Playground" app you installed previously.
+You will need to scan the QR Code using the "Playground" app you installed previously.
 
 <img src="/media/quick-start-screenshot.png" width=200 alt="Running App" >
 
@@ -69,4 +69,3 @@ or
 ```bash
 $ tns run ios
 ```
-
diff --git a/docs_src/content/docs/10-routing.md b/docs_src/content/docs/10-routing.md
@@ -63,6 +63,7 @@ navigate({
 ```
 
 The value for the `frame` option can be one of the following:
+
 * the `id` of the `<frame>` component (for example: `<frame id="main-frame">`)
 * a reference to the `<frame>` (for example: `<frame bind:this="{mainFrame}">`)
 * a NativeScript `Frame` instance.
@@ -110,10 +111,10 @@ To show a page or component modally use the `showModal` function. Specify the pa
 ```html
 <!--{ filename: 'App.svelte'} -->
 <page>
-   <actionBar title="Master" />
-   <stackLayout>
-     <button text="Open Modal" on:tap="{launchModal}" />
-   </stackLayout>
+  <actionBar title="Master" />
+  <stackLayout>
+    <button text="Open Modal" on:tap="{launchModal}" />
+  </stackLayout>
 </page>
 
 <script>
@@ -129,7 +130,7 @@ To show a page or component modally use the `showModal` function. Specify the pa
 <!--{filename: "DetailPage.svelte" }-->
 <frame id="detail-page-frame">
   <page>
-
+    <label text="Detail Page" />
   </page>
 </frame>
 ```
@@ -153,6 +154,7 @@ The `closeModal` function closes the current modal view and optionally returns a
     <label text="{modalResult}" />
   </stackLayout>
 </page>
+
 <script>
   import DetailPage from './DetailPage.svelte'
   import { showModal } from 'svelte-native'
@@ -172,6 +174,7 @@ The `closeModal` function closes the current modal view and optionally returns a
     <button text="Close me" on:tap="{ () => closeModal('hi from modal') }" />
   </page>
 </frame>
+
 <script>
   import { closeModal } from 'svelte-native'
 </script>
diff --git a/docs_src/content/docs/30-layouts.md b/docs_src/content/docs/30-layouts.md
@@ -26,6 +26,7 @@ The following example creates a simple grid. For more information about creating
   <label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#4383b8"/>
 </absoluteLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/absolute_layout_grid.svg" />
 
 #### Overlapping elements
@@ -38,6 +39,7 @@ The following example creates a group of overlapping items.
   <label text="30,40" left="30" top="40" width="100" height="100" backgroundColor="#4383b8"/>
 </absoluteLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/absolute_layout_overlap.svg" />
 
 #### Additional children props
@@ -202,6 +204,7 @@ The following example creates four items with enabled line wrapping. When the ro
   <label text="fourth" width="30%" backgroundColor="#286290"/>
 </flexboxLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/flexbox_layout_wrap.svg" />
 
 #### Column flex layout with reverse order and items with a different `alignSelf`
@@ -289,6 +292,7 @@ The following example creates a grid with responsive design, where space is alot
   <Label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
 </gridLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/grid_layout_star_sizing.svg" />
 
 #### Grid layout with fixed and auto sizing
@@ -303,6 +307,7 @@ The following example create a grid with one auto-sized column and one column wi
   <label text="1,1" row="1" col="1" backgroundColor="#4383b8"/>
 </gridLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/grid_layout_fixed_auto.svg" />
 
 #### Grid layout with mixed sizing and merged cells
@@ -320,6 +325,7 @@ The following example creates a complex grid with responsive design, mixed width
   <label text="2,2" row="2" col="2" backgroundColor="#4383b8"/>
 </gridLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/grid_layout_complex.svg" />
 
 #### Props
@@ -371,6 +377,7 @@ The following example creates a horizontal stack of 3 equally-sized elements. It
   <label text="third" width="70" backgroundColor="#1c486b"/>
 </stackLayout>
 ```
+
 <img width=320 src="/media/docs/layouts/stack_layout_horizontal.svg" />
 
 #### Stack layout with horizontally aligned children
diff --git a/docs_src/content/docs/35-action-bars.md b/docs_src/content/docs/35-action-bars.md
@@ -6,7 +6,7 @@ title: ActionBars
 
 <div class="nsref"><a title="NativeScript Documentation" href="https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar">Class Docs</a></div>
 
-`<actionBar>` is a UI component that provides a toolbar at the top of the activity window. 
+`<actionBar>` is a UI component that provides a toolbar at the top of the activity window.
 
 This component is the NativeScript abstraction for the Android [app bar](https://developer.android.com/training/appbar/) and the iOS [navigation bar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/).
 
@@ -134,4 +134,4 @@ Extends [`<actionItem>`](docs#actionitem).
 
 | Android | iOS |
 |---------|-----|
-| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)
diff --git a/docs_src/content/docs/37-tab-navigation.md b/docs_src/content/docs/37-tab-navigation.md
@@ -11,12 +11,12 @@ The TabStrip component is only valid within [`BottomNavigation`](docs#bottom-nav
 ```html
 <tabStrip>
   <tabStripItem>
-    <label text="Home"></Label>
-    <image src="font://&#xf015;" class="fas t-36"></image>
+    <label text="Home" />
+    <image src="font://&#xf015;" class="fas t-36" />
   </tabStripItem>
   <tabStripItem>
-    <label text="Account"></Label>
-    <image src="font://&#xf007;" class="fas t-36"></image>
+    <label text="Account" />
+    <image src="font://&#xf007;" class="fas t-36" />
   </tabStripItem>
 </tabStrip>
 ```
@@ -43,8 +43,8 @@ Tab strip items define the display of a tab selector within a [`TabStrip`](docs#
 ```html
 <tabStrip>
   <tabStripItem>
-    <label text="Home"></Label>
-    <image src="font://&#xf015;" class="fas t-36"></image>
+    <label text="Home" />
+    <image src="font://&#xf015;" class="fas t-36" />
   </tabStripItem>
   ...
 </tabStrip>
@@ -74,7 +74,7 @@ A `TabContentItem` contains the view to be displayed when the corresponding TabS
 ```html
 <tabContentitem>
   <stackLayout>
-    <label>Hello From This Tab</label>
+    <label text="Hello From This Tab" />
   </stackLayout>
 </tabContentItem>
 ```
@@ -101,33 +101,33 @@ It can contain a single [`TabStrip`](docs#tabstrip) child (which contains multip
   <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
   <tabStrip>
     <tabStripItem>
-      <label text="Home"></label>
-      <image src="font://&#xf015;" class="fas t-36"></image>
+      <label text="Home" />
+      <image src="font://&#xf015;" class="fas t-36" />
     </tabStripItem>
     <tabStripItem class="special">
-      <label text="Account"></label>
-      <image src="font://&#xf007;" class="fas t-36"></image>
+      <label text="Account" />
+      <image src="font://&#xf007;" class="fas t-36" />
     </tabStripItem>
     <tabStripItem class="special">
-      <label text="Search"></label>
-      <image src="font://&#xf00e;" class="fas t-36"></image>
+      <label text="Search" />
+      <image src="font://&#xf00e;" class="fas t-36" />
     </tabStripItem>
   </tabStrip>
 
   <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
   <tabContentItem>
     <gridLayout>
-      <label text="Home Page" class="h2 text-center"></label>
+      <label text="Home Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
   <tabContentItem>
     <gridLayout>
-      <label text="Account Page" class="h2 text-center"></label>
+      <label text="Account Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
   <tabContentItem>
     <gridLayout>
-      <label text="Search Page" class="h2 text-center"></label>
+      <label text="Search Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
 
@@ -171,33 +171,33 @@ Unlike the [`Bottom Navigation`](docs#bottom-navigation) component, The tabs com
   <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
   <tabStrip>
     <tabStripItem>
-      <label text="Home"></label>
-      <image src="font://&#xf015;" class="fas t-36"></image>
+      <label text="Home" />
+      <image src="font://&#xf015;" class="fas t-36" />
     </tabStripItem>
     <tabStripItem class="special">
-      <label text="Account"></label>
-      <image src="font://&#xf007;" class="fas t-36"></image>
+      <label text="Account" />
+      <image src="font://&#xf007;" class="fas t-36" />
     </tabStripItem>
     <tabStripItem class="special">
-      <label text="Search"></label>
-      <image src="font://&#xf00e;" class="fas t-36"></image>
+      <label text="Search" />
+      <image src="font://&#xf00e;" class="fas t-36" />
     </tabStripItem>
   </tabStrip>
 
   <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
   <tabContentItem>
     <gridLayout>
-      <label text="Home Page" class="h2 text-center"></label>
+      <label text="Home Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
   <tabContentItem>
     <gridLayout>
-      <label text="Account Page" class="h2 text-center"></label>
+      <label text="Account Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
   <tabContentItem>
     <gridLayout>
-      <label text="Search Page" class="h2 text-center"></label>
+      <label text="Search Page" class="h2 text-center" />
     </gridLayout>
   </tabContentItem>
 
diff --git a/docs_src/content/docs/40-components.md b/docs_src/content/docs/40-components.md
diff --git a/docs_src/content/docs/50-dialogs.md b/docs_src/content/docs/50-dialogs.md
