javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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;
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);
background-size: $search-bar-ios-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 8px;
@include calc(margin-left, "50% - 60px");
transition: $search-bar-ios-input-transition;
}
.search-bar-input {
@ -57,13 +57,12 @@ $search-bar-ios-input-close-icon-size: 17px !default;
background-repeat: no-repeat;
background-position: 8px center;
transition: $search-bar-ios-input-transition;
&::placeholder {
color: $search-bar-ios-input-placeholder-color;
}
@include calc(padding-left, "50% - 28px");
transition: $search-bar-ios-input-transition;
}
.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 {
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'
],
defaultProperties: {
'showCancel': false,
'cancelText': 'Cancel',
'placeholder': 'Search'
}
@ -35,7 +36,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></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 {
/**

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

@ -5,9 +5,13 @@
</ion-toolbar> -->
<ion-content>
<form [ng-form-model]="form">
<label> Default Search </label>
<label> Search - Default </label>
<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>
<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>
</ion-content>