javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(searchbar): update searchbar docs

Browse Source
This commit is contained in:
Brandy Carney
2018-02-02 13:57:07 -05:00
parent 9fb2858927
commit 67cecf0dfb
1 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/core/src/components/searchbar/readme.md
View File

@ -1,14 +1,39 @@
# ion-searchbar
Manages the display of a Searchbar which can be used to search or filter items.
Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.
A searchbar should be used instead of an input to search lists. A clear button is displayed on input in the searchbar's text field. Clicking on the clear button will erase the text field and remain focused in the input. A cancel button can be enabled which will clear the input and remove focus.
```html
<ion-searchbar
[(ngModel)]="myInput"
[showCancelButton]="shouldShowCancel"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)">
</ion-searchbar>
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>
<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>
<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>
<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>
<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<!-- Searchbar in a Toolbar -->
<ion-toolbar>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
```
<!-- Auto Generated Below -->