example declare SearchBar component via XML (#4236)

* example declare SearchBar component via XML

* fix tslint errors

* fix error - not  found modules
This commit is contained in:
Nikolay Tsonev
2017-05-26 14:12:47 +03:00
committed by GitHub
parent 00c8b89232
commit 88c2848bd4
2 changed files with 29 additions and 0 deletions

View File

@ -0,0 +1,17 @@
import { EventData } from 'tns-core-modules/data/observable';
import { SearchBar } from "tns-core-modules/ui/search-bar"
export function navigatingTo(args: EventData) {
console.log("page navigating to");
}
// >> searchbar-clear
export function onClear(args){
console.log("clear search-bar text");
}
// << searchbar-clear
// >> searchbar-submit
export function onSubmit(args){
var searchbar:SearchBar = <SearchBar>args.object;
console.log("Search submit result: "+searchbar.text);
}
// << searchbar-submit

View File

@ -5,6 +5,18 @@ environment: nativescript
description: "Examples for using search-bar"
previous_url: /ApiReference/ui/search-bar/HOW-TO
---
# Declare SearchBar via XML
```XML
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<StackLayout class="p-20">
<SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
</StackLayout>
</Page>
```
## SearchBar submit event
{%snippet searchbar-submit%}
## SearchBar clear event
{%snippet searchbar-clear%}
# SearchBar
Using the SearchBar requires the "ui/search-bar" module.
{%snippet article-require-searchbar-module%}