docs: components revamp

app/ng-ui-widgets-category/tab-view/end.md

@@ -4,7 +4,7 @@
 
 | Name     | Type     | Description    |
 |:---------|:---------|:---------------|
-| `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. Tabs beyond this limit will be recreated from the TabView when needed. |
+| `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. |
 | `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. |
 | `iosIconRenderingMode` | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. |
 | `items` | `Array<TabViewItem>` | Gets or sets the items of the TabView. |

app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts

@@ -24,7 +24,7 @@ export const routerConfig = [
         data: { title: "Styling Tab View" }
     },
     {
-        path: "tips-andt-tricks",
+        path: "tips-and-tricks",
         component: TipsAndTrciksComponent,
         data: { title: "Tips and Tricks" }
     }

app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html

@@ -1,6 +1,6 @@
 <GridLayout sdkExampleTitle sdkToggleNavButton>
 	<!-- >> android-tabs-position-ng-html -->
->
+  	<TabView>
 		<StackLayout *tabItem="{title: 'First Tab', iconSource: 'res://icon'}">
 			<Label text="First Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
 		</StackLayout>

app/ng-ui-widgets-category/text-field/end.md

@@ -1,8 +1,49 @@
+## Properties
 
-**API Reference for the** [TextField Class](http://docs.nativescript.org/api-reference/modules/_ui_text_field_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#autocapitalizationtype) | Gets or sets the autocapitalization type. |
+| `autocorrect` | `boolean` | Enables or disables autocorrection. |
+| `keyboardType` | [`KeyboardType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#keyboardtype) | Gets or sets the soft keyboard type |
+| `letterSpacing` | `number` | Gets or sets letter space style property. |
+| `lineHiehgt` | `number` | Gets or sets line height style property. |
+| `maxLength` | `number` | Gets or sets the max number of symbols allowed as input. |
+| `returnKeyType` | [`ReturnKeyType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#returnkeytype) | Gets or sets the soft keyboard return key flavor. |
+| `secure` | `string` | Gets or sets if a text field is for password entry. |
+| `text` | `string` | Gets or sets the text. |
+| `textAlignment` | `TextAlignment` | Gets or sets the text alignment. |
+| `textDecoration` | `TextDecoration` | Gets or sets the text decoration. |
+| `textTransform` | `TextTransform` | Gets or sets the text transform. |
+| `whiteSpace` | `WhiteSpace` | Gets or sets white space style property. |
 
-**Native Component**
+## Methods
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `focus` | Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`. |
+| `dismissSoftInput` | Hides the soft input method, ususally a soft keyboard. |
+
+## Events
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `blur` | Emitted when the text field is unfocused. |
+| `focus` | Emitted when the text field is focused. |
+| `returnPress` | Emitted when the return key is tapped. |
+| `textChange` | Emitted when there is a new text input. |
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/text-field](http://docs.nativescript.org/api-reference/modules/_ui_text_field_.html) | `Module` | 
+| [TextField](https://docs.nativescript.org/api-reference/classes/_ui_text_field_.textfield) | `Class` |
+
+
+## Native Component
 
 | Android               | iOS      |
 |:----------------------|:---------|
 | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextField](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/) |
+
+

app/ng-ui-widgets-category/text-field/metadata.md

@@ -4,3 +4,4 @@ description: TextField component is an abstraction over iOS's UITextField  and A
 position: 43
 slug: text-field-ng
 ---
+example-order: usage, styling

app/ng-ui-widgets-category/text-field/styling/article.md

@@ -0,0 +1 @@
+<snippet id='textfield-styling-props'/>

app/ng-ui-widgets-category/text-field/styling/styling.component.html

@@ -0,0 +1,8 @@
+<StackLayout class="form" sdkExampleTitle sdkToggleNavButton>
+    <!-- >> textfield-styling-props -->
+    <TextField hint="Enter text" 
+               color="whitesmoke" 
+               backgroundColor="lightyellow">
+    </TextField>
+    <!-- << textfield-styling-props -->
+</StackLayout>

app/ng-ui-widgets-category/text-field/styling/styling.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./styling.component.html"
+})
+export class StylingComponent { }

app/ng-ui-widgets-category/text-field/text-field-examples.component.ts

@@ -2,8 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic TextField", "/text-field/basic"),
-    new Link("TextField binding", "/text-field/binding")
+    new Link("Usage", "/text-field/usage"),
+    new Link("Styling", "/text-field/styling")
 ];
 
 @Component({

app/ng-ui-widgets-category/text-field/text-field-examples.module.ts

@@ -2,8 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { TextFieldExamplesComponent } from "./text-field-examples.component";
-import { BasicTextFieldComponent } from "./basic-text-field/basic-text-field.component";
-import { TextFieldBindingComponent } from "./text-field-binding/text-field-binding.component";
+import { UsageComponent } from "./usage/usage.component";
+import { StylingComponent } from "./styling/styling.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -12,14 +12,14 @@ export const routerConfig = [
         component: TextFieldExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicTextFieldComponent,
-        data: { title: "Basic TextField" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     },
     {
-        path: "binding",
-        component: TextFieldBindingComponent,
-        data: { title: "TextField binding" }
+        path: "styling",
+        component: StylingComponent,
+        data: { title: "Styling" }
     }
 ];
 
@@ -31,7 +31,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TextFieldExamplesComponent, BasicTextFieldComponent, TextFieldBindingComponent]
+    declarations: [TextFieldExamplesComponent, UsageComponent, StylingComponent]
 })
 
 export class TextFieldExamplesModule {

app/ng-ui-widgets-category/text-field/basic-text-field/article.md → app/ng-ui-widgets-category/text-field/usage/article.md

@@ -5,5 +5,4 @@ To handle an interaction when the user leaves TextField use the `blur` event.
 To explicitly show and hide a keyboard, we can call the methods `focus` and `dismissSoftInput`.
 
 <snippet id='sample-ui-textfield-html'/>
-
 <snippet id='textfield-handle-submit-event'/>

app/ng-ui-widgets-category/text-field/usage/usage.component.html

@@ -0,0 +1,15 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+	<!-- >> sample-ui-textfield-html -->
+	<TextField hint="Enter Date" 
+			   [text]='name' 
+			   secure="false"
+			   keyboardType="datetime"
+			   returnKeyType="done" 
+			   (returnPress)="onReturnPress($event)"
+			   autocorrect="false"
+			   maxLength="10"
+			   (focus)="onFocus($event)" 
+			   (blur)="onBlur($event)">
+	</TextField>
+	<!-- << sample-ui-textfield-html -->
+</GridLayout>

app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.ts → app/ng-ui-widgets-category/text-field/usage/usage.component.ts

@@ -1,23 +1,14 @@
-import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
+// >> textfield-handle-submit-event
+import { Component } from "@angular/core";
 import { TextField } from "tns-core-modules/ui/text-field";
 import { setTimeout } from "tns-core-modules/timer";
 
 @Component({
     moduleId: module.id,
-    styleUrls: ["./../text-field.style.css"],
-    templateUrl: "./basic-text-field.component.html"
+    templateUrl: "./usage.component.html"
 })
-export class BasicTextFieldComponent  {
-    public birthDate;
-
-    // >> textfield-handle-submit-event
-    firstTfLoaded(args) {
-        // import { TextField } from "tns-core-modules/ui/text-field";
-        let firstTextfield = <TextField>args.object;
-        setTimeout(() => {
-            firstTextfield.focus(); // Shows the soft input method, ususally a soft keyboard.
-        }, 100);
-    }
+export class UsageComponent {
+    name = "";
 
     onReturnPress(args) {
         // returnPress event will be triggered when user submits a value
@@ -60,5 +51,6 @@ export class BasicTextFieldComponent  {
         // blur event will be triggered when the user leaves the TextField
         let textField = <TextField>args.object;
     }
-    // << textfield-handle-submit-event
+
 }
+// << textfield-handle-submit-event