From 2db33541b14979ef076db37372e40ce6337dfad6 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Tue, 8 Oct 2019 14:45:17 +0300 Subject: [PATCH 1/2] docs: TextField revamp --- app/ng-ui-widgets-category/tab-view/end.md | 2 +- .../tab-view/tab-view-examples.module.ts | 2 +- .../tips-and-tricks.component.html | 2 +- .../basic-text-field.component.html | 86 ------------------- app/ng-ui-widgets-category/text-field/end.md | 45 +++++++++- .../text-field/metadata.md | 1 + .../text-field/styling/article.md | 1 + .../text-field/styling/styling.component.html | 8 ++ .../text-field/styling/styling.component.ts | 7 ++ .../text-field/text-field-binding/article.md | 5 -- .../text-field-binding.component.html | 15 ---- .../text-field-binding.component.ts | 35 -------- .../text-field-examples.component.ts | 4 +- .../text-field/text-field-examples.module.ts | 48 +++++++++-- .../text-field/text-field.style.css | 6 -- .../{basic-text-field => usage}/article.md | 1 - .../text-field/usage/usage.component.html | 15 ++++ .../usage.component.ts} | 22 ++--- 18 files changed, 126 insertions(+), 179 deletions(-) delete mode 100644 app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.html create mode 100644 app/ng-ui-widgets-category/text-field/styling/article.md create mode 100644 app/ng-ui-widgets-category/text-field/styling/styling.component.html create mode 100644 app/ng-ui-widgets-category/text-field/styling/styling.component.ts delete mode 100644 app/ng-ui-widgets-category/text-field/text-field-binding/article.md delete mode 100644 app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.html delete mode 100644 app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.ts delete mode 100644 app/ng-ui-widgets-category/text-field/text-field.style.css rename app/ng-ui-widgets-category/text-field/{basic-text-field => usage}/article.md (99%) create mode 100644 app/ng-ui-widgets-category/text-field/usage/usage.component.html rename app/ng-ui-widgets-category/text-field/{basic-text-field/basic-text-field.component.ts => usage/usage.component.ts} (75%) diff --git a/app/ng-ui-widgets-category/tab-view/end.md b/app/ng-ui-widgets-category/tab-view/end.md index 849adcd1..008f1ba1 100644 --- a/app/ng-ui-widgets-category/tab-view/end.md +++ b/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` | Gets or sets the items of the TabView. | diff --git a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts b/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts index 62f3a02a..304a866f 100644 --- a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts +++ b/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" } } diff --git a/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html index 0a9f6492..cc166055 100644 --- a/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html +++ b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html @@ -1,6 +1,6 @@ -> + diff --git a/app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.html b/app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.html deleted file mode 100644 index b3815e2c..00000000 --- a/app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/text-field/end.md b/app/ng-ui-widgets-category/text-field/end.md index 42473590..04fb6a04 100644 --- a/app/ng-ui-widgets-category/text-field/end.md +++ b/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/) | + + diff --git a/app/ng-ui-widgets-category/text-field/metadata.md b/app/ng-ui-widgets-category/text-field/metadata.md index cbb1b98d..baa3eb1f 100644 --- a/app/ng-ui-widgets-category/text-field/metadata.md +++ b/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 diff --git a/app/ng-ui-widgets-category/text-field/styling/article.md b/app/ng-ui-widgets-category/text-field/styling/article.md new file mode 100644 index 00000000..ec66f90f --- /dev/null +++ b/app/ng-ui-widgets-category/text-field/styling/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-ui-widgets-category/text-field/styling/styling.component.html b/app/ng-ui-widgets-category/text-field/styling/styling.component.html new file mode 100644 index 00000000..ef2a6eb4 --- /dev/null +++ b/app/ng-ui-widgets-category/text-field/styling/styling.component.html @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/text-field/styling/styling.component.ts b/app/ng-ui-widgets-category/text-field/styling/styling.component.ts new file mode 100644 index 00000000..3afa5d94 --- /dev/null +++ b/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 { } diff --git a/app/ng-ui-widgets-category/text-field/text-field-binding/article.md b/app/ng-ui-widgets-category/text-field/text-field-binding/article.md deleted file mode 100644 index e72a3cad..00000000 --- a/app/ng-ui-widgets-category/text-field/text-field-binding/article.md +++ /dev/null @@ -1,5 +0,0 @@ -HTML - - -Handle TextField returnPress event - diff --git a/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.html b/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.html deleted file mode 100644 index 597393a9..00000000 --- a/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.ts b/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.ts deleted file mode 100644 index 5510a965..00000000 --- a/app/ng-ui-widgets-category/text-field/text-field-binding/text-field-binding.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -// >> textfield-binding-show-result -import { Component } from "@angular/core"; -import { TextField } from "tns-core-modules/ui/text-field"; - -@Component({ - moduleId: module.id, - templateUrl: "./text-field-binding.component.html", - styleUrls: ["./../text-field.style.css"] -}) -export class TextFieldBindingComponent { - public firstTx: string = ""; - - public onTextChange(args) { - let textField = args.object; - - console.log("onTextChange"); - this.firstTx = textField.text; - } - - public onReturn(args) { - let textField = args.object; - - console.log("onReturn"); - this.firstTx = textField.text; - } - - public showAlert(result) { - alert("Text: " + result); - } - - public submit(result) { - alert("Text: " + result); - } -} -// << textfield-binding-show-result diff --git a/app/ng-ui-widgets-category/text-field/text-field-examples.component.ts b/app/ng-ui-widgets-category/text-field/text-field-examples.component.ts index 3af150f7..9c4018b2 100644 --- a/app/ng-ui-widgets-category/text-field/text-field-examples.component.ts +++ b/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({ diff --git a/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts b/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts index f478f65f..91b23146 100644 --- a/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts +++ b/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,26 +12,56 @@ 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" } } ]; @NgModule({ schemas: [NO_ERRORS_SCHEMA], + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + imports: [ TitleAndNavButtonModule, NativeScriptCommonModule, NativeScriptRouterModule, NativeScriptRouterModule.forChild(routerConfig) ], - declarations: [TextFieldExamplesComponent, BasicTextFieldComponent, TextFieldBindingComponent] + declarations: [TextFieldExamplesComponent, UsageComponent, StylingComponent] }) export class TextFieldExamplesModule { diff --git a/app/ng-ui-widgets-category/text-field/text-field.style.css b/app/ng-ui-widgets-category/text-field/text-field.style.css deleted file mode 100644 index 76a0bf03..00000000 --- a/app/ng-ui-widgets-category/text-field/text-field.style.css +++ /dev/null @@ -1,6 +0,0 @@ -TextField, Label { - margin-top: 20; - vertical-align: center; - font-size: 15; - padding-left: 8; -} diff --git a/app/ng-ui-widgets-category/text-field/basic-text-field/article.md b/app/ng-ui-widgets-category/text-field/usage/article.md similarity index 99% rename from app/ng-ui-widgets-category/text-field/basic-text-field/article.md rename to app/ng-ui-widgets-category/text-field/usage/article.md index 34e4f9ab..450a6062 100644 --- a/app/ng-ui-widgets-category/text-field/basic-text-field/article.md +++ b/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`. - diff --git a/app/ng-ui-widgets-category/text-field/usage/usage.component.html b/app/ng-ui-widgets-category/text-field/usage/usage.component.html new file mode 100644 index 00000000..b0cc7cd3 --- /dev/null +++ b/app/ng-ui-widgets-category/text-field/usage/usage.component.html @@ -0,0 +1,15 @@ + + + + + + diff --git a/app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.ts b/app/ng-ui-widgets-category/text-field/usage/usage.component.ts similarity index 75% rename from app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.ts rename to app/ng-ui-widgets-category/text-field/usage/usage.component.ts index c1dc3c25..0e4c5085 100644 --- a/app/ng-ui-widgets-category/text-field/basic-text-field/basic-text-field.component.ts +++ b/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 = 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 = args.object; } - // << textfield-handle-submit-event + } +// << textfield-handle-submit-event From b72b19bfa877476523167aa829168f4ac4ccc6fc Mon Sep 17 00:00:00 2001 From: Elena Hristova Date: Tue, 8 Oct 2019 18:25:03 +0300 Subject: [PATCH 2/2] chore: remove empty lines --- .../text-field/text-field-examples.module.ts | 30 ------------------- 1 file changed, 30 deletions(-) diff --git a/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts b/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts index 91b23146..424eca19 100644 --- a/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts +++ b/app/ng-ui-widgets-category/text-field/text-field-examples.module.ts @@ -25,36 +25,6 @@ export const routerConfig = [ @NgModule({ schemas: [NO_ERRORS_SCHEMA], - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - imports: [ TitleAndNavButtonModule, NativeScriptCommonModule,