mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
146 lines
2.9 KiB
TypeScript
146 lines
2.9 KiB
TypeScript
import {Directive, View, CSSClass, ElementRef, Optional, Parent} from 'angular2/angular2';
|
|
|
|
import {IonicConfig} from '../../config/config';
|
|
import {IonicComponent} from '../../config/annotations';
|
|
import {Ion} from '../ion';
|
|
import {Platform} from '../../platform/platform';
|
|
import {Button} from '../button/button';
|
|
|
|
|
|
/*
|
|
|
|
'home': {
|
|
ios: ['ion-ios-home', 'ion-ios-home-outline'],
|
|
md: 'ion-md-home'
|
|
}
|
|
|
|
1-for-1 swap
|
|
Map of stuff that's 1-for-1
|
|
<icon name="home"></icon>
|
|
<icon class="ion-ios-home"></icon>
|
|
<icon class="ion-md-home"></icon>
|
|
|
|
|
|
Always use the same no matter what
|
|
Cuz it's not in the map of 1-for-1's
|
|
<icon name="alert"></icon>
|
|
<icon class="ion-alert"></icon>
|
|
|
|
|
|
Different between modes
|
|
Used different attributes
|
|
<icon ios-name="search3" md-name="search2"></icon>
|
|
<icon class="ion-ios-search3"></icon>
|
|
<icon class="ion-md-search2"></icon>
|
|
|
|
|
|
|
|
Ionicons SVG
|
|
<icon svg="home"></icon>
|
|
<icon><svg>...ios...</svg></icon>
|
|
<icon><svg>...md...</svg></icon>
|
|
|
|
|
|
Custom SVG File
|
|
<icon svg-src="home.svg"></icon>
|
|
|
|
|
|
Custom Font Icon
|
|
<icon class="fa-home"></icon>
|
|
|
|
*/
|
|
|
|
|
|
@Directive({
|
|
selector: 'icon',
|
|
properties: [
|
|
'name',
|
|
'iconName'
|
|
],
|
|
host: {
|
|
'[attr.aria-label]': 'label',
|
|
'[attr.role]': 'role',
|
|
'[attr.aria-hidden]': 'hidden'
|
|
}
|
|
})
|
|
export class IconDirective {
|
|
constructor(elementRef: ElementRef, @Optional() @Parent() parentButton: Button) {
|
|
var ele = this.ele = elementRef.nativeElement;
|
|
|
|
this.previousText = (ele.previousSibling && ele.previousSibling.textContent || '').trim();
|
|
this.nextText = (ele.nextSibling && ele.nextSibling.textContent || '').trim();
|
|
|
|
if (parentButton) {
|
|
this.withinButton = true;
|
|
this.iconLeft = !!this.nextText;
|
|
this.iconRight = !!this.previousText;
|
|
this.iconOnly = !this.iconLeft && !this.iconRight;
|
|
|
|
parentButton.registerIcon(this);
|
|
}
|
|
}
|
|
|
|
onInit() {
|
|
if (!this.name) return;
|
|
|
|
// add the css class
|
|
this.ele.classList.add(this.name);
|
|
|
|
|
|
if (this.withinButton && !this.iconOnly) {
|
|
// icon's within a button that has text
|
|
this.hidden = true;
|
|
|
|
} else {
|
|
// either not within a button, or it's not a icon only button
|
|
this.role = 'img';
|
|
this.hidden = false;
|
|
this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
|
|
}
|
|
|
|
|
|
if (this.iconOnly) {
|
|
// this is an icon within a button that has not text label
|
|
|
|
} else {
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
onDestroy() {
|
|
this.ele = null;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@IonicComponent({
|
|
selector: 'ion-icon',
|
|
properties: [
|
|
'md',
|
|
'ios'
|
|
],
|
|
host: {
|
|
'mode': 'mode'
|
|
}
|
|
})
|
|
@View({
|
|
template: '<i class="icon" [class]="iconClass">',
|
|
directives: [CSSClass]
|
|
})
|
|
export class Icon extends Ion {
|
|
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
|
|
super(elementRef, ionicConfig);
|
|
}
|
|
onIonInit() {
|
|
this.iconClass = this.ios;
|
|
console.log('ICON', this.mode);
|
|
setTimeout(() => {
|
|
console.log('MODE', this.mode);
|
|
});
|
|
}
|
|
}
|