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

refactor(searchbar): moved the left-align class to the searchbar host element

Browse Source 
references #247
This commit is contained in:
Brandy Carney
2015-11-03 13:22:36 -05:00
parent 8b0e56ce20
commit ad3bb2b07f
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/searchbar/modes/ios.scss
View File

@ -78,7 +78,7 @@ ion-searchbar {
margin-right: -100%; margin-right: -100%;
} }
.searchbar-input-container.left-align { ion-searchbar.left-align {
.searchbar-search-icon { .searchbar-search-icon {
margin-left: 0; margin-left: 0;
} }
@ -108,7 +108,7 @@ ion-searchbar {
} }
} }
.searchbar-cancel.left-align { .left-align .searchbar-cancel {
right: 0px; right: 0px;
} }

7
ionic/components/searchbar/searchbar.ts
View File

@ -25,13 +25,16 @@ import {ConfigComponent} from '../../config/decorators';
console.log('Default Cancel'); console.log('Default Cancel');
} }
}, },
host: {
'[class.left-align]': 'shouldLeftAlign',
}
template: template:
'<div class="searchbar-input-container" [class.left-align]="shouldLeftAlign">' + '<div class="searchbar-input-container">' +
'<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' + '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
'(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' + '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
'<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' + '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
'</div>' + '</div>' +
'<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>', '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
directives: [FORM_DIRECTIVES, NgIf, NgClass] directives: [FORM_DIRECTIVES, NgIf, NgClass]
}) })