From 13e87a717c363ee616ff08f9446dd28c80447d6d Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Wed, 14 Dec 2022 09:23:27 +0100 Subject: [PATCH 1/3] docs: SearchBar --- content/sidebar.ts | 12 +-- content/ui/searchbar.md | 170 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+), 6 deletions(-) create mode 100644 content/ui/searchbar.md diff --git a/content/sidebar.ts b/content/sidebar.ts index 81475b82..02a5f23b 100644 --- a/content/sidebar.ts +++ b/content/sidebar.ts @@ -144,9 +144,9 @@ export default [ // { text: 'NavigationButton', link: '//#' }, // ], // }, - // { - // text: 'Components', - // items: [ + { + text: 'Components', + items: [ // { text: 'ActivityIndicator', link: '//#' }, // { text: 'Button', link: '//#' }, // { text: 'DatePicker', link: '//#' }, @@ -158,7 +158,7 @@ export default [ // { text: 'Placeholder', link: '//#' }, // { text: 'Progress', link: '//#' }, // { text: 'ScrollView', link: '//#' }, - // { text: 'SearchBar', link: '//#' }, + { text: 'SearchBar', link: '/ui/searchbar' }, // { text: 'SegmentedBar', link: '//#' }, // { text: 'Slider', link: '//#' }, // { text: 'Switch', link: '//#' }, @@ -179,8 +179,8 @@ export default [ // { text: 'PromptDialog', link: '//#' }, // ], // }, - // ], - // }, + ], + }, // { // text: 'Diving Deeper', // items: [{ text: 'Architecture concepts', link: '//#' }], diff --git a/content/ui/searchbar.md b/content/ui/searchbar.md new file mode 100644 index 00000000..da4a8a3f --- /dev/null +++ b/content/ui/searchbar.md @@ -0,0 +1,170 @@ +--- +title: SearchBar +--- + + +`` is a UI component that provides a user interface for entering search queries and submitting requests to the search provider. + + +### A simple SearchBar handling the clear and submit events + +```xml + +``` + +```ts +import { Observable, Page, PropertyChangeData, SearchBar } from '@nativescript/core' + +export function onNavigatingTo(args) { + const page = args.object as Page + const vm = new Observable() + vm.set('sbText', '') + vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => { + if (propertyChangeData.propertyName === 'sbText') { + const searchBar = propertyChangeData.object as SearchBar + console.log(`Input changed! New value: ${propertyChangeData.value}`) + } + }) + page.bindingContext = vm +} + +export function onSubmit(args) { + const searchBar = args.object as SearchBar + console.log(`Searching for ${searchBar.text}`) +} + +export function onClear(args) { + const searchBar = args.object as SearchBar + console.log(`Clear event raised`) +} +``` + + + +## SearchBar Reference(s) +### Props + +| Name | Type | Description | +| -------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| `hint` | `String` | Gets or sets placeholder text for the input area. | +| `text` | `String` | Gets or sets the value of the search query. | +| `textFieldBackgroundColor` | `Color` | Gets or sets the background color of the input area. | +| `textFieldHintColor` | `Color` | Gets or sets the color of the placeholder text. | +| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/searchbar) | + + + +### Events + +| name | description | +| ------------ | -------------------------------------------------------------------------------------------- | +| `textChange` | Emitted when the text is changed. | +| `submit` | Emitted when the search input is submitted. | +| `clear` | Emitted when the current search input is cleared through the **X** button in the input area. | + +### Native Component + +| Android | iOS | +| ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | +| [`android.widget.SearchView`](https://developer.android.com/reference/android/widget/SearchView.html) | [`UISearchBar`](https://developer.apple.com/documentation/uikit/uisearchbar) | From a51a3ee8357682f041ba5085de81520ca50d4c5d Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Tue, 20 Dec 2022 16:14:50 +0100 Subject: [PATCH 2/3] chore: update --- content/ui/searchbar.md | 141 ++++++++++++++++++++++++++++------------ 1 file changed, 101 insertions(+), 40 deletions(-) diff --git a/content/ui/searchbar.md b/content/ui/searchbar.md index da4a8a3f..78a831f9 100644 --- a/content/ui/searchbar.md +++ b/content/ui/searchbar.md @@ -9,39 +9,44 @@ title: SearchBar ### A simple SearchBar handling the clear and submit events ```xml - + ``` ```ts -import { Observable, Page, PropertyChangeData, SearchBar } from '@nativescript/core' +import { Observable, Page, SearchBar } from '@nativescript/core' export function onNavigatingTo(args) { const page = args.object as Page - const vm = new Observable() - vm.set('sbText', '') - vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => { - if (propertyChangeData.propertyName === 'sbText') { - const searchBar = propertyChangeData.object as SearchBar - console.log(`Input changed! New value: ${propertyChangeData.value}`) - } - }) + const vm = new HelloWorldModel() page.bindingContext = vm } -export function onSubmit(args) { - const searchBar = args.object as SearchBar - console.log(`Searching for ${searchBar.text}`) -} +export class HelloWorldModel extends Observable { + searchText= "" + constructor() { + super() + } + + onSearchBarLoaded(args: EventData){ + const searchBar = args.object as SearchBar; + searchBar.on("textChange",(args: PropertyChangeData)=>{ + + console.log("Event name: ",args.eventName) +}) + } +onSubmit(args: EventData) { + const searchBar = args.object as SearchBar + console.log(`Searching for ${searchBar.text}`) + } -export function onClear(args) { - const searchBar = args.object as SearchBar - console.log(`Clear event raised`) + onClear(args: EventData) { + const searchBar = args.object as SearchBar + console.log(`Clear event raised`) + } } ``` @@ -142,28 +147,84 @@ export class UsageComponent { /// --> -## SearchBar Reference(s) -### Props +## Props + +### hint +```xml + +``` +Gets or sets placeholder text for the input area. -| Name | Type | Description | -| -------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| `hint` | `String` | Gets or sets placeholder text for the input area. | -| `text` | `String` | Gets or sets the value of the search query. | -| `textFieldBackgroundColor` | `Color` | Gets or sets the background color of the input area. | -| `textFieldHintColor` | `Color` | Gets or sets the color of the placeholder text. | -| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/searchbar) | +--- +### text +```xml + +``` +Gets or sets the value of the search query. - +--- +### textFieldBackgroundColor +```xml + +``` +Gets or sets the background color of the input area. -### Events +--- +### textFieldHintColor +```xml + +``` +Gets or sets the color of the placeholder text. -| name | description | -| ------------ | -------------------------------------------------------------------------------------------- | -| `textChange` | Emitted when the text is changed. | -| `submit` | Emitted when the search input is submitted. | -| `clear` | Emitted when the current search input is cleared through the **X** button in the input area. | +--- +### ...Inherited +For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/searchbar) + +## Event(s) +### textChange +```ts +searchBar.on("textChange", (args: PropertyChangeData) => { + + console.log("Event name: ", args.oldValue) + + }) +``` +Emitted when the search text is changed. + +--- +### submit +```xml + +``` +```ts +export class HelloWorldModel extends Observable { + onSubmit(args: EventData) { + const searchBar = args.object as SearchBar + console.log(`Searching for ${searchBar.text}`) + } +} +``` +Emitted when the search text is submitted. + +--- +### clear +```xml + +``` +```ts +export class HelloWorldModel extends Observable { + + onClear(args: EventData) { + const searchBar = args.object as SearchBar + console.log(`Clear event raised`) + } +} +``` +Emitted when the current search input is cleared through the **X** button in the input area. + +--- -### Native Component +## Native Component | Android | iOS | | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | From 8d164206484925b1048f45bf2717d0f16963f7c4 Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Mon, 30 Jan 2023 18:57:10 +0100 Subject: [PATCH 3/3] feat: screenshots --- content/ui/searchbar.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/content/ui/searchbar.md b/content/ui/searchbar.md index 78a831f9..575e3eca 100644 --- a/content/ui/searchbar.md +++ b/content/ui/searchbar.md @@ -5,6 +5,19 @@ title: SearchBar `` is a UI component that provides a user interface for entering search queries and submitting requests to the search provider. +--- +
+
+
+ Android SearchBar Example +
+ +
+iOS SearchBar Example +
+
+
+ ### A simple SearchBar handling the clear and submit events