javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

button icons

Browse Source
This commit is contained in:
Adam Bradley
2015-07-23 16:12:22 -05:00
parent 57438267c5
commit 3437c1d496
6 changed files with 101 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ionic/components/button/button.scss
View File

@@ -203,19 +203,6 @@ button,
margin-top: 0;
}
.icon-left:before {
font-size: 1.5em;
margin-top: -0.1em;
margin-right: 0.25em;
}
.icon-right:before {
order: 2;
font-size: 1.5em;
margin-top: -0.1em;
margin-left: 0.25em;
}
// Button Misc
// --------------------------------------------------

16
ionic/components/button/button.ts
View File

@@ -1,14 +1,24 @@
import {Directive, ElementRef, Optional, Ancestor, onDestroy, NgZone} from 'angular2/angular2';
import {Directive, ElementRef, Optional, Ancestor, onDestroy, NgZone, Query, QueryList} from 'angular2/angular2';
import {Icon} from '../icon/icon';
import {IonicConfig} from '../../config/config';
import {Activator} from '../../util/activator';
import * as dom from '../../util/dom';
@Directive({
selector: 'button,[button]'
selector: 'button,[button]',
host: {
'[class.icon-left]': 'icon.iconLeft',
'[class.icon-right]': 'icon.iconRight',
'[class.icon-only]': 'icon.iconOnly'
}
})
export class Button {}
export class Button {
registerIcon(icon) {
this.icon = icon;
}
}
@Directive({

1
ionic/components/button/extensions/material.scss
View File

@@ -90,7 +90,6 @@ $button-material-border-radius: 3px !default;
&.activated {
opacity: 1;
background: transparent;
}
}

62
ionic/components/button/test/icons/main.html
View File

@@ -2,77 +2,95 @@
<div class="padding">
<div>
<button primary class="ion-home icon-left">
<button primary>
<icon name="ion-home"></icon>
Left Icon
</button>
<a button primary class="ion-home icon-left">
<a button primary>
<icon name="ion-home"></icon>
Left Icon
</a>
</div>
<div>
<button primary class="ion-star icon-right">
<button primary>
Right Icon
<icon name="ion-star"></icon>
</button>
<a button primary class="ion-star icon-right">
<a button primary>
Right Icon
<icon name="ion-star"></icon>
</a>
</div>
<div>
<button primary class="ion-ionic button-icon">
<button primary>
<icon name="ion-flag"></icon>
</button>
<a button primary class="ion-ionic button-icon">
<a button primary>
<icon name="ion-flag"></icon>
</a>
</div>
<div>
<button large primary class="ion-home icon-left">
<button large primary>
<icon name="ion-help-circled"></icon>
Left, Large
</button>
<a button large primary class="ion-home icon-left">
<a button large primary>
<icon name="ion-help-circled"></icon>
Left, Large
</a>
</div>
<div>
<button large primary class="ion-star icon-right">
<button large primary>
Right, Large
<icon name="ion-settings"></icon>
</button>
<a button large primary class="ion-star icon-right">
<a button large primary>
Right, Large
<icon name="ion-settings"></icon>
</a>
</div>
<div>
<button primary class="ion-ionic button-icon button-large">
<button large primary>
<icon name="ion-heart"></icon>
</button>
<a button primary class="ion-ionic button-icon button-large">
<a button large primary>
<icon name="ion-heart"></icon>
</a>
</div>
<div>
<button small primary class="ion-home icon-left">
Left Icon, Small
<button small primary>
<icon name="ion-checkmark"></icon>
Left, Small
</button>
<a button small primary class="ion-home icon-left">
Left Icon, Small
<a button small primary>
<icon name="ion-checkmark"></icon>
Left, Small
</a>
</div>
<div>
<button small primary class="ion-star icon-right">
Right Icon, Small
<button small primary>
Right, Small
<icon name="ion-forward"></icon>
</button>
<a button small primary class="ion-star icon-right">
Right Icon, Small
<a button small primary>
Right, Small
<icon name="ion-forward"></icon>
</a>
</div>
<div>
<button small icon primary class="ion-ionic">
<button small primary>
<icon name="ion-search"></icon>
</button>
<a button small icon primary class="ion-ionic">
<a button small primary>
<icon name="ion-search"></icon>
</a>
</div>