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

refactor(search-bar): Added iOS styling for cancel button

Browse Source 
Cancel button shows when clicking in input box, animation isn’t done
though. Added some examples. References #247
This commit is contained in:
Brandy Carney
2015-10-06 18:10:13 -04:00
parent 4ff55392ce
commit 9b60da4308
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ionic/components/search-bar/modes/ios.scss
View File

@ -33,15 +33,15 @@ $search-bar-ios-input-close-icon-size: 17px !default;
width: $search-bar-ios-input-search-icon-size + 1; width: $search-bar-ios-input-search-icon-size + 1;
height: $search-bar-ios-input-search-icon-size + 1; height: $search-bar-ios-input-search-icon-size + 1;
@include calc(margin-left, "50% - 60px");
transition: $search-bar-ios-input-transition;
@include svg-background-image($search-bar-ios-input-search-icon-svg); @include svg-background-image($search-bar-ios-input-search-icon-svg);
background-size: $search-bar-ios-input-search-icon-size; background-size: $search-bar-ios-input-search-icon-size;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 8px; top: 8px;
@include calc(margin-left, "50% - 60px");
transition: $search-bar-ios-input-transition;
} }
.search-bar-input { .search-bar-input {
@ -57,13 +57,12 @@ $search-bar-ios-input-close-icon-size: 17px !default;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 8px center; background-position: 8px center;
transition: $search-bar-ios-input-transition;
&::placeholder { &::placeholder {
color: $search-bar-ios-input-placeholder-color; color: $search-bar-ios-input-placeholder-color;
} }
@include calc(padding-left, "50% - 28px"); @include calc(padding-left, "50% - 28px");
transition: $search-bar-ios-input-transition;
} }
.search-bar-close-icon { .search-bar-close-icon {
@ -89,6 +88,14 @@ $search-bar-ios-input-close-icon-size: 17px !default;
} }
} }
.search-bar-cancel.left-align {
@extend button[clear];
display: block;
padding-left: 8px;
padding-right: 0;
min-height: 0;
}
&.hairlines .search-bar { &.hairlines .search-bar {
border-bottom-width: 0.55px; border-bottom-width: 0.55px;
} }

3
ionic/components/search-bar/search-bar.ts
View File

@ -23,6 +23,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
'query' 'query'
], ],
defaultProperties: { defaultProperties: {
'showCancel': false,
'cancelText': 'Cancel', 'cancelText': 'Cancel',
'placeholder': 'Search' 'placeholder': 'Search'
} }
@ -35,7 +36,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder"> (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></div> <div class="search-bar-close-icon"></div>
</div> </div>
<button class="search-bar-cancel">{{cancelText}}</button>` <button *ng-if="showCancel" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`
}) })
export class SearchBar extends Ion { export class SearchBar extends Ion {
/** /**

8
ionic/components/search-bar/test/floating/main.html
View File

@ -5,9 +5,13 @@
</ion-toolbar> --> </ion-toolbar> -->
<ion-content> <ion-content>
<form [ng-form-model]="form"> <form [ng-form-model]="form">
<label> Default Search </label> <label> Search - Default </label>
<ion-search-bar ng-control="searchQuery" class="e2eFloatingSearchBar"></ion-search-bar> <ion-search-bar ng-control="searchQuery" class="e2eFloatingSearchBar"></ion-search-bar>
<label> Placeholder Search </label> <label> Search - Custom Placeholder </label>
<ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar> <ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
<label> Search - Cancel Button </label>
<ion-search-bar ng-control="searchQuery" show-cancel="true"></ion-search-bar>
<label> Search - Custom Cancel Button </label>
<ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done"></ion-search-bar>
</form> </form>
</ion-content> </ion-content>