Merge pull request halfnelson#79 from luizbills/fix-tags

Fix native tag names in docs

Author: halfnelson

docs_src/content/docs/30-layouts.md

@@ -53,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.
@@ -128,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
 
@@ -239,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 |
 |------|------|-------------|
@@ -251,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:
 
@@ -337,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 |
 |------|------|-------------|
@@ -426,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

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

docs_src/content/docs/40-components.md

@@ -663,7 +663,7 @@ function indexChange(event) {
 }
 ```
 
-> **NOTE:** Currently, `<TabViewItem>` expects a single child element. In most cases, you might want to wrap your content in a _layout_.
+> **NOTE:** Currently, `<tabViewItem>` expects a single child element. In most cases, you might want to wrap your content in a _layout_.
 
 #### Adding icons to tabs
 

docs_src/content/tutorial/05-todo-app-example.md

@@ -44,7 +44,7 @@ Remove the default `.btn` rule from `app.css` and set the contents of App.svelte
 <!--{ filename: 'App.svelte' }-->
 <page>
     <actionBar title="My Tasks" />
-    
+
     <tabs tabsPosition="bottom">
         <tabStrip>
             <tabStripItem title="To Do" />
@@ -85,7 +85,7 @@ Replace the contents of the first `<tabContentItem>` with:
 
 ```html
 <gridLayout columns="*,120" rows="70,*">
-    <!-- Configures the text field and ensures that pressing Return on the keyboard 
+    <!-- Configures the text field and ensures that pressing Return on the keyboard
         produces the same result as tapping the button. -->
     <textField col="0" row="0" bind:text="{textFieldValue}" hint="Type new task..." editable="true"
         on:returnPress="{onButtonTap}" />
@@ -103,7 +103,7 @@ and to the bottom of the file add a script tag:
 ```html
 <script>
     import { Template } from 'svelte-native/components'
-    
+
     let todos = []
     let textFieldValue = ""
 
@@ -130,7 +130,7 @@ The `<listView>` contains a `<Template>` which is a Svelte component used to ren
 
 When `onButtonTap` callback is fired, the code we added to the script element, will build a new `todos` array including the added item, and clear the text field. The `onItemTap` callback will just log which list item and index was tapped using `console.log` (which works fine in NativeScript).
 
-> **NOTE** `<ListView>` will look for the first `<Template>` component in its children. The template component acts similar to a slot and will render its content for each item. This is exposed to the content as `item` via the `let:item` on the template element.
+> **NOTE** `<listView>` will look for the first `<Template>` component in its children. The template component acts similar to a slot and will render its content for each item. This is exposed to the content as `item` via the `let:item` on the template element.
 
 #### Progress So Far
 
@@ -158,7 +158,7 @@ Then replace our `onItemTap` function with this new one:
         "Mark completed",
         "Delete forever"
     ]);
-    
+
     console.log(result); // Logs the selected option for debugging.
     let item = todos[args.index]
     switch (result) {