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

Better search bar centering

Browse Source
This commit is contained in:
Max Lynch
2015-06-03 21:14:31 -05:00
parent 4786976859
commit 43bb73c36b
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/search-bar/extensions/ios.scss
View File

@ -52,7 +52,7 @@ $search-bar-ios-background-size: 13px 13px !default;
transition: all .2s ease; transition: all .2s ease;
} }
.search-bar-input-container.focused { .search-bar-input-container.left-align {
.search-bar-icon { .search-bar-icon {
transform: translateX(0); transform: translateX(0);
-webkit-transform: translateX(0); -webkit-transform: translateX(0);

7
ionic/components/search-bar/search-bar.js
View File

@ -22,9 +22,10 @@ import {IonicComponent} from 'ionic/config/component'
}) })
@View({ @View({
template: ` template: `
<div class="search-bar-input-container" [class.focused]="isFocused"> <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
<div class="search-bar-icon"></div> <div class="search-bar-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()" (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder"> <input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
</div> </div>
<button class="button search-bar-cancel">{{ cancelText }}</button>` <button class="button search-bar-cancel">{{ cancelText }}</button>`
}) })
@ -65,9 +66,11 @@ export class SearchBar {
inputFocused() { inputFocused() {
this.isFocused = true; this.isFocused = true;
this.shouldLeftAlign = true;
} }
inputBlurred() { inputBlurred() {
this.isFocused = false; this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != '';
} }
} }