Merge pull request #426 from NativeScript/niliev/revamp

docs: components revamp

Author: NickIliev

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

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

app/ng-ui-widgets-category/text-view/basic-text-view/article.md

@@ -1,8 +1,49 @@
+## Properties
 
-**API Reference for the** [TextView Class](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.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-view](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html) | `Module` | 
+| [TextView](https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview) | `Class` |
+
+
+## Native Component
 
 | Android               | iOS      |
 |:----------------------|:---------|
 | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) |
+
+

app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.html

@@ -4,3 +4,4 @@ description: TextView component is an abstraction over iOS's UITextView and Andr
 position: 44
 slug: text-view-ng
 ---
+example-order: usage, styling

app/ng-ui-widgets-category/text-view/basic-text-view/style.css

@@ -1 +1 @@
-The TextView component can be used to type large text in your app. The component can also be used show any content by setting the `editable` property to `false`.
+The `TextView` component can be used to type larger text content in your app. The component can also be used show any content by setting the `editable` property to `false`.

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

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic TextView", "/text-view/basic")
+    new Link("Usage", "/text-view/usage")
 ];
 
 @Component({

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

@@ -3,7 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { TextViewExamplesComponent } from "./text-view-examples.component";
-import { BasicTextViewComponent } from "./basic-text-view/basic-text-view.component";
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -12,9 +12,9 @@ export const routerConfig = [
         component: TextViewExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicTextViewComponent,
-        data: { title: "Basic TextView" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -27,7 +27,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TextViewExamplesComponent, BasicTextViewComponent]
+    declarations: [TextViewExamplesComponent, UsageComponent]
 })
 
 export class TextViewExamplesModule {

app/ng-ui-widgets-category/text-view/overview.md

@@ -0,0 +1,2 @@
+<snippet id='textview-html'/>
+<snippet id='textview-edit-disable-code'/>