NativeScript - SearchBar

基本 API:

• backgroundColor 框的背景色
• textFieldHintColor 提示语颜色
• color 输入文字颜色
• SearchBar.submitEvent 提交事件
• SearchBar.clearEvent 清除输入的 text 事件就是右侧的 x 按钮

import { Component, ViewChild, ElementRef } from "angular2/core"
import { Color } from "color"
import { SearchBar } from "ui/search-bar"
import { TextField } from "ui/text-field"

@Component({
  selector: "my-app",
  template: `
<StackLayout orientation="vertical">
      <TextField></TextField>
      <SearchBar #searchBar hint="searchHint" [(ngModel)]='search'></SearchBar>

</StackLayout>
`,
  styleUrls: ["app.css"]
})
export class AppComponent {
  search: string = "searchText"
  nsSearchBar: SearchBar

  @ViewChild("searchBar")
  ngSearchBar: ElementRef

  constructor() {}

  ngAfterViewInit() {
    this.nsSearchBar = this.ngSearchBar.nativeElement
    this.nsSearchBar.focus()

    this.nsSearchBar.backgroundColor = new Color("pink")
    this.nsSearchBar.textFieldHintColor = new Color("green")
    this.nsSearchBar.color = new Color("red")

    this.nsSearchBar.on(SearchBar.submitEvent, e => {
      console.log("submit text", this.search)
      this.nsSearchBar.dismissSoftInput()
    })

    this.nsSearchBar.on(SearchBar.clearEvent, e => {
      console.log("clear Text")
    })
  }
}