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

fix(searchbar): only show clear icon when focused on the searchbar

Browse Source 
closes #5922
This commit is contained in:
Brandy Carney
2016-04-08 17:46:34 -04:00
parent 00814084b1
commit ecf93023f3
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/searchbar/searchbar.scss
View File

@ -38,8 +38,14 @@ ion-searchbar {
} }
.searchbar-clear-icon { .searchbar-clear-icon {
display: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 0; min-height: 0;
} }
.searchbar-has-value.searchbar-focused .searchbar-clear-icon {
display: block;
}

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

@ -61,7 +61,7 @@ export class SearchbarInput {
'</button>' + '</button>' +
'<div class="searchbar-search-icon"></div>' + '<div class="searchbar-search-icon"></div>' +
'<input [value]="value" (input)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' + '<input [value]="value" (input)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' +
'<button clear *ngIf="value" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' + '<button clear class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
'</div>' + '</div>' +
'<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>', '<button clear (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput] directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]