Merge branch 'master' of https://github.com/halfnelson/svelte-native

Author: halfnelson

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?
 

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
 ```
-

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>

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
@@ -51,9 +53,9 @@ When an element is a direct child of `<absoluteLayout>`, you can work with the f
 
 ### DockLayout
 
-`<DockLayout>` is a layout container that lets you dock child elements to the sides or the center of the layout.
+`<dockLayout>` is a layout container that lets you dock child elements to the sides or the center of the layout.
 
-`<DockLayout>` has the following behavior:
+`<dockLayout>` has the following behavior:
 
 * Uses the `dock` property to dock its children to the `left`, `right`, `top`, `bottom` or center of the layout.<br/>To dock a child element to the center, it must be the **last child** of the container and you must set the `stretchLastChild` property of the parent to `true`.
 * Enforces layout constraints to its children.
@@ -126,15 +128,15 @@ The following example creates a single line of 4 elements that stretch across th
 
 #### Additional children props
 
-When an element is a direct child of `<DockLayout>`, you can work with the following additional properties.
+When an element is a direct child of `<dockLayout>`, you can work with the following additional properties.
 
 | Name | Type | Description |
 |------|------|-------------|
 | `dock` | `String` | Specifies which side to dock the element to.<br/>Valid values: `top`, `right`, `bottom`, or `left`.
 
 ### FlexboxLayout
 
-`<FlexboxLayout>` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.
+`<flexboxLayout>` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.
 
 #### Examples
 
@@ -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`
@@ -236,7 +239,7 @@ The following example shows how to use:
 
 #### Additional children props
 
-When an element is a direct child of `<FlexboxLayout>`, you can work with the following additional properties.
+When an element is a direct child of `<flexboxLayout>`, you can work with the following additional properties.
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -248,11 +251,11 @@ When an element is a direct child of `<FlexboxLayout>`, you can work with the fo
 
 ### GridLayout
 
-`<GridLayout>` is a layout container that lets you arrange its child elements in a table-like manner.
+`<gridLayout>` is a layout container that lets you arrange its child elements in a table-like manner.
 
 The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other.
 
-By default, `<GridLayout>` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma.
+By default, `<gridLayout>` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma.
 
 You can set a fixed size for column width and row height or you can create them in a responsive manner:
 
@@ -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
@@ -331,7 +337,7 @@ The following example creates a complex grid with responsive design, mixed width
 
 #### Additional children props
 
-When an element is a direct child of `<GridLayout>`, you can work with the following additional properties.
+When an element is a direct child of `<gridLayout>`, you can work with the following additional properties.
 
 | Name | Type | Description |
 |------|------|-------------|
@@ -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
@@ -419,7 +426,7 @@ The following example creates a diagonal stack of items with responsive sizes. I
 
 ### WrapLayout
 
-`<WrapLayout>` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column.
+`<wrapLayout>` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column.
 
 #### Examples
 

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/).
 
@@ -128,10 +128,10 @@ Extends [`<actionItem>`](docs#actionitem).
 
 | Name | Description |
 |------|-------------|
-| `tap`| Emitted when the `<NavigationButton>` is tapped.
+| `tap`| Emitted when the `<navigationButton>` is tapped.
 
 #### Native component
 
 | 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)

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>