mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
Fixed up search bar
This commit is contained in:
@ -20,7 +20,7 @@ export * from 'ionic/components/nav/nav-item'
|
|||||||
export * from 'ionic/components/nav-bar/nav-bar'
|
export * from 'ionic/components/nav-bar/nav-bar'
|
||||||
export * from 'ionic/components/slides/slides'
|
export * from 'ionic/components/slides/slides'
|
||||||
export * from 'ionic/components/radio/radio'
|
export * from 'ionic/components/radio/radio'
|
||||||
// export * from 'ionic/components/search-bar/search-bar'
|
export * from 'ionic/components/search-bar/search-bar'
|
||||||
// export * from 'ionic/components/split-view/split-view'
|
// export * from 'ionic/components/split-view/split-view'
|
||||||
export * from 'ionic/components/segment/segment'
|
export * from 'ionic/components/segment/segment'
|
||||||
export * from 'ionic/components/switch/switch'
|
export * from 'ionic/components/switch/switch'
|
||||||
|
@ -14,7 +14,7 @@ import {ListPage} from './pages/list'
|
|||||||
import {CardPage} from './pages/card'
|
import {CardPage} from './pages/card'
|
||||||
import {FormPage} from './pages/form'
|
import {FormPage} from './pages/form'
|
||||||
import {SegmentPage} from './pages/segment'
|
import {SegmentPage} from './pages/segment'
|
||||||
import {SearchBar} from './pages/search-bar'
|
import {SearchBarPage} from './pages/search-bar'
|
||||||
import {IconsPage} from './pages/ionicons'
|
import {IconsPage} from './pages/ionicons'
|
||||||
import {TabsPage} from './pages/tabs'
|
import {TabsPage} from './pages/tabs'
|
||||||
import {AsidePage} from './pages/aside'
|
import {AsidePage} from './pages/aside'
|
||||||
@ -40,7 +40,7 @@ export class IonicApp {
|
|||||||
{ title: 'Cards', component: CardPage },
|
{ title: 'Cards', component: CardPage },
|
||||||
{ title: 'Forms', component: FormPage },
|
{ title: 'Forms', component: FormPage },
|
||||||
{ title: 'Segments', component: SegmentPage },
|
{ title: 'Segments', component: SegmentPage },
|
||||||
{ title: 'Search Bar', component: SearchBar},
|
{ title: 'Search Bar', component: SearchBarPage },
|
||||||
{ title: 'Icons', component: IconsPage },
|
{ title: 'Icons', component: IconsPage },
|
||||||
{ title: 'Tabs', component: TabsPage },
|
{ title: 'Tabs', component: TabsPage },
|
||||||
{ title: 'Aside', component: AsidePage },
|
{ title: 'Aside', component: AsidePage },
|
||||||
|
@ -2,17 +2,19 @@ import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from '
|
|||||||
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
||||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
|
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
|
||||||
|
|
||||||
import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
|
import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
|
||||||
NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
|
NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
|
||||||
|
|
||||||
|
console.log(NavbarTemplate, Navbar, Content, formDirectives);
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ion-view'
|
selector: 'ion-view'
|
||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
template: `
|
template: `
|
||||||
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
|
<ion-navbar *navbar><ion-title>Search Bar</ion-title></ion-navbar>
|
||||||
|
|
||||||
<ion-content class="padding">
|
<ion-content class="padding">
|
||||||
<h2>Search Bar</h2>
|
<h2>Search Bar</h2>
|
||||||
@ -25,17 +27,20 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<form (^submit)="doSubmit($event)" [control-group]="form">
|
<form (^submit)="doSubmit($event)" [control-group]="form">
|
||||||
|
<ion-search-bar control="searchQuery"></ion-search-bar>
|
||||||
|
<div>
|
||||||
|
Query: <b>{{form.controls.searchQuery.value}}</b>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
`,
|
`,
|
||||||
directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton]
|
directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
|
||||||
})
|
})
|
||||||
export class SegmentPage {
|
export class SearchBarPage {
|
||||||
constructor() {
|
constructor() {
|
||||||
var fb = new FormBuilder();
|
var fb = new FormBuilder();
|
||||||
this.form = fb.group({
|
this.form = fb.group({
|
||||||
mapStyle: ['hybrid', Validators.required]
|
searchQuery: ['', Validators.required]
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -32,8 +32,8 @@ export class SearchBar {
|
|||||||
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
|
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
console.log('Search bar for list', this.list);
|
//console.log('Search bar for list', this.list);
|
||||||
this.query = 'Cats';
|
this.query = '';
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user