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

refactor(searchbar): hide the cancel button by default, add property to show

Browse Source 
BREAKING CHANGES:

Searchbar
- The cancel button (ios and md) is now hidden by default, passing
`showCancelButton` will display it.
This commit is contained in:
Brandy Carney
2016-06-14 15:36:22 -04:00
parent 614ace462d
commit 9927cf958d
4 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/searchbar/searchbar.ios.scss
View File

@ -128,8 +128,12 @@ ion-searchbar {
transition: $searchbar-ios-cancel-transition; transition: $searchbar-ios-cancel-transition;
cursor: pointer; cursor: pointer;
pointer-events: none; pointer-events: none;
display: none;
} }
.searchbar-show-cancel .searchbar-ios-cancel {
display: block;
}
// Searchbar Left Aligned (iOS only) // Searchbar Left Aligned (iOS only)
// ----------------------------------------- // -----------------------------------------

2
src/components/searchbar/searchbar.md.scss
View File

@ -130,7 +130,7 @@ ion-searchbar {
// Searchbar Focused // Searchbar Focused
// ----------------------------------------- // -----------------------------------------
.searchbar-has-focus:not(.searchbar-hide-cancel) { .searchbar-has-focus.searchbar-show-cancel {
.searchbar-search-icon { .searchbar-search-icon {
display: none; display: none;
} }

16
src/components/searchbar/searchbar.ts
View File

@ -15,7 +15,7 @@ import {isPresent} from '../../util/util';
* ```html * ```html
* <ion-searchbar * <ion-searchbar
* [(ngModel)]="myInput" * [(ngModel)]="myInput"
* [hideCancelButton]="shouldHideCancel" * [showCancelButton]="shouldShowCancel"
* (ionInput)="onInput($event)" * (ionInput)="onInput($event)"
* (ionCancel)="onCancel($event)"> * (ionCancel)="onCancel($event)">
* </ion-searchbar> * </ion-searchbar>
@ -29,19 +29,19 @@ import {isPresent} from '../../util/util';
host: { host: {
'[class.searchbar-has-value]': '_value', '[class.searchbar-has-value]': '_value',
'[class.searchbar-active]': '_isActive', '[class.searchbar-active]': '_isActive',
'[class.searchbar-hide-cancel]': 'hideCancelButton', '[class.searchbar-show-cancel]': 'showCancelButton',
'[class.searchbar-left-aligned]': 'shouldAlignLeft()' '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
}, },
template: template:
'<div class="searchbar-input-container">' + '<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" clear dark class="searchbar-md-cancel">' + '<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
'<ion-icon name="arrow-back"></ion-icon>' + '<ion-icon name="arrow-back"></ion-icon>' +
'</button>' + '</button>' +
'<div #searchbarIcon class="searchbar-search-icon"></div>' + '<div #searchbarIcon class="searchbar-search-icon"></div>' +
'<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' + '<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
'<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' + '<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
'</div>' + '</div>' +
'<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>', '<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class Searchbar { export class Searchbar {
@ -59,7 +59,7 @@ export class Searchbar {
/** /**
* @input {boolean} Whether to hide the cancel button or not. Default: `"false"`. * @input {boolean} Whether to hide the cancel button or not. Default: `"false"`.
*/ */
@Input() hideCancelButton: any = false; @Input() showCancelButton: any = false;
/** /**
* @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`. * @input {number} How long, in milliseconds, to wait to trigger the `input` event after each keystroke. Default `250`.
@ -178,9 +178,9 @@ export class Searchbar {
* On Initialization check for attributes * On Initialization check for attributes
*/ */
ngOnInit() { ngOnInit() {
let hideCancelButton = this.hideCancelButton; let showCancelButton = this.showCancelButton;
if (typeof hideCancelButton === 'string') { if (typeof showCancelButton === 'string') {
this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true'); this.showCancelButton = (showCancelButton === '' || showCancelButton === 'true');
} }
} }

12
src/components/searchbar/test/floating/main.html
View File

@ -1,30 +1,30 @@
<ion-content> <ion-content>
<h5 padding-left> Search - Default </h5> <h5 padding-left> Search - Default </h5>
<ion-searchbar [(ngModel)]="defaultSearch" debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar> <ion-searchbar [(ngModel)]="defaultSearch" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
<p padding-left> <p padding-left>
defaultSearch: <b>{{ defaultSearch }}</b> defaultSearch: <b>{{ defaultSearch }}</b>
</p> </p>
<h5 padding-left> Search - Custom Placeholder </h5> <h5 padding-left> Search - Custom Placeholder </h5>
<ion-searchbar [autocorrect]="isAutocorrect" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar> <ion-searchbar [autocorrect]="isAutocorrect" showCancelButton="true" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
<p padding-left> <p padding-left>
customPlaceholder: <b>{{ customPlaceholder }}</b> customPlaceholder: <b>{{ customPlaceholder }}</b>
</p> </p>
<h5 padding-left> Search - Hide Cancel Button </h5> <h5 padding-left> Search - No Cancel Button </h5>
<ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar> <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
<p padding-left> <p padding-left>
defaultCancel: <b>{{ defaultCancel }}</b> defaultCancel: <b>{{ defaultCancel }}</b>
</p> </p>
<h5 padding-left> Search - Custom Cancel Button Danger </h5> <h5 padding-left> Search - Custom Cancel Button Danger </h5>
<ion-searchbar (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar> <ion-searchbar (ionInput)="triggerInput($event)" showCancelButton (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
<h5 padding-left> Search - Value passed </h5> <h5 padding-left> Search - Value passed </h5>
<ion-searchbar value="mysearch" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar> <ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
<p padding> <p padding>
<button block (click)="changeValue()">Change Value</button> <button block (click)="changeValue()">Change Value</button>