mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
docs(demos): add search demo
This commit is contained in:
@ -97,6 +97,7 @@ export function getPageFor(hash) {
|
||||
'segment': inputs.SegmentPage,
|
||||
'select': inputs.SelectPage,
|
||||
'switch': inputs.SwitchPage,
|
||||
'search': inputs.SearchPage,
|
||||
|
||||
'inputs': labels.BasicPage,
|
||||
'fixed-inline-labels': labels.FixedInlinePage,
|
||||
|
@ -1,6 +1,7 @@
|
||||
export * from './checkbox/pages';
|
||||
export * from './radio/pages';
|
||||
export * from './range/pages';
|
||||
export * from './search/pages';
|
||||
export * from './segment/pages';
|
||||
export * from './select/pages';
|
||||
export * from './switch/pages';
|
||||
|
69
demos/component-docs/inputs/search/pages.ts
Normal file
69
demos/component-docs/inputs/search/pages.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import {Page} from 'ionic/ionic';
|
||||
import {forwardRef} from 'angular2/angular2';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'inputs/search/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class SearchPage{
|
||||
constructor() {
|
||||
this.searchQuery = '';
|
||||
this.items = [
|
||||
'Amsterdam',
|
||||
'Bogota',
|
||||
'Buenos Aires',
|
||||
'Cairo',
|
||||
'Dhaka',
|
||||
'Edinburgh',
|
||||
'Geneva',
|
||||
'Genoa',
|
||||
'Glasglow',
|
||||
'Hanoi',
|
||||
'Hong Kong',
|
||||
'Islamabad',
|
||||
'Istanbul',
|
||||
'Jakarta',
|
||||
'Kiel',
|
||||
'Kyoto',
|
||||
'Le Havre',
|
||||
'Lebanon',
|
||||
'Lhasa',
|
||||
'Lima',
|
||||
'London',
|
||||
'Los Angeles',
|
||||
'Madrid',
|
||||
'Manila',
|
||||
'New York',
|
||||
'Olympia',
|
||||
'Oslo',
|
||||
'Panama City',
|
||||
'Peking',
|
||||
'Philadelphia',
|
||||
'San Francisco',
|
||||
'Seoul',
|
||||
'Taipeh',
|
||||
'Tel Aviv',
|
||||
'Tokio',
|
||||
'Uelzen',
|
||||
'Washington'
|
||||
];
|
||||
}
|
||||
|
||||
getItems() {
|
||||
var q = this.searchQuery;
|
||||
if(q.trim() == '') {
|
||||
return this.items;
|
||||
}
|
||||
return this.items.filter((v) => {
|
||||
if(v.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
14
demos/component-docs/inputs/search/template.html
Normal file
14
demos/component-docs/inputs/search/template.html
Normal file
@ -0,0 +1,14 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
<ion-title>
|
||||
Search
|
||||
</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content>
|
||||
<ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
|
||||
<ion-list #list>
|
||||
<ion-item *ng-for="#item of getItems()">
|
||||
{{item}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
Reference in New Issue
Block a user