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

docs(icon): update icon docs

Browse Source
This commit is contained in:
Adam Bradley
2016-01-06 21:37:18 -06:00
parent 1d6843753a
commit 239a2d5102
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
ionic/components/icon/icon.ts
View File

@@ -1,4 +1,4 @@
import {Directive, Input, ElementRef, Renderer} from 'angular2/core';
import {Directive, ElementRef, Renderer} from 'angular2/core';
import {Config} from '../../config/config';
@@ -10,20 +10,34 @@ import {Config} from '../../config/config';
* For a full list of available icons, check out the
* [Ionicons resource docs](../../../../resources/ionicons).
*
* One feature of Ionicons is that when icon names are set, the actual icon
* which is rendered can change slightly depending on the mode the app is
* running from. For example, by setting the icon name of `alarm`, on iOS the
* icon will automatically apply `ios-alarm`, and on Material Design it will
* automatically apply `md-alarm`. This allow the developer to write the
* markup once, and let Ionic automatically apply the appropriate icon.
*
* @usage
* ```html
* <!-- use the appropriate star icon for ios and md -->
* <!-- automatically uses the correct "star" icon depending on the mode -->
* <ion-icon name="star"></ion-icon>
*
* <!-- explicity set the icon for each platform -->
* <!-- explicity set the icon for each mode -->
* <ion-icon ios="ios-home" md="md-home"></ion-icon>
*
* <!-- always use the same icon, no matter what the mode -->
* <ion-icon name="ios-clock"></ion-icon>
* <ion-icon name="twitter-logo"></ion-icon>
* ```
*
* @property {string} [name] - Use the appropriate icon for the mode.
* @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
* If there is not an outlined version for the particular icon, it will use the default (full) version.
* @property {string} [ios] - Explicitly set the icon to use on iOS.
* @property {string} [md] - Explicitly set the icon to use on Android.
* @property {boolean} [isActive] - Whether or not the icon has an "active"
* appearance. On iOS an active icon is filled in or full appearance, and an
* inactive icon on iOS will use an outlined version of the icon same icon.
* Material Design icons do not change appearance depending if they're active
* or not. The `isActive` property is largely used by the tabbar.
* @see {@link /docs/v2/components#icons Icon Component Docs}
*
*/
@@ -56,7 +70,7 @@ export class Icon {
// deprecated warning
console.warn('<icon> has been renamed to <ion-icon>');
console.warn('<ion-icon> requires the "name" attribute w/ a value');
console.warn('<ion-icon name="home"></ion-icon> should now be <ion-icon name="home"></ion-icon>');
console.warn('<ion home></icon> should now be <ion-icon name="home"></ion-icon>');
}
}
@@ -68,7 +82,7 @@ export class Icon {
* @private
*/
set name(val) {
if (!(/md-|ios-|-logo/.test(val))) {
if (!(/^md-|^ios-|-logo$/.test(val))) {
// this does not have one of the defaults
// so lets auto add in the mode prefix for them
val = this.mode + '-' + val;