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

ionicons 3.0

Browse Source
This commit is contained in:
Adam Bradley
2015-08-31 13:51:45 -05:00
parent 6721f60f4c
commit 32e03d6790
32 changed files with 2909 additions and 2346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/aside/test/basic/page1.html
View File

@@ -3,7 +3,7 @@
<ion-nav-items primary>
<button aside-toggle id="e2eHeaderToggleAside">
<icon navicon></icon>
<icon menu></icon>
</button>
</ion-nav-items>

2
ionic/components/aside/test/basic/page2.html
View File

@@ -3,7 +3,7 @@
<ion-nav-items primary>
<button aside-toggle id="e2eHeaderToggleAside">
<icon navicon></icon>
<icon menu></icon>
</button>
</ion-nav-items>

12
ionic/components/button/test/fab/main.html
View File

@@ -1,24 +1,24 @@
<button fab fab-left fab-top>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>
<button fab fab-center fab-top secondary>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>
<button fab fab-right fab-top danger>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>
<button fab fab-left fab-bottom light>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>
<button fab fab-center fab-bottom>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>
<button fab fab-right fab-bottom dark>
<icon name="ion-plus"></icon>
<icon add></icon>
</button>

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

@@ -7,11 +7,11 @@
<div>
<button>
<icon name="ion-home"></icon>
<icon home></icon>
Left Icon
</button>
<a button>
<icon name="ion-home"></icon>
<icon home></icon>
Left Icon
</a>
</div>
@@ -19,30 +19,30 @@
<div>
<button>
Right Icon
<icon name="ion-star"></icon>
<icon star></icon>
</button>
<a button>
Right Icon
<icon name="ion-star"></icon>
<icon star></icon>
</a>
</div>
<div>
<button>
<icon name="ion-flag"></icon>
<icon flag></icon>
</button>
<a button>
<icon name="ion-flag"></icon>
<icon flag></icon>
</a>
</div>
<div>
<button large>
<icon name="ion-help-circled"></icon>
<icon help-circle></icon>
Left, Large
</button>
<a button large>
<icon name="ion-help-circled"></icon>
<icon help-circle></icon>
Left, Large
</a>
</div>
@@ -50,30 +50,30 @@
<div>
<button large>
Right, Large
<icon name="ion-settings"></icon>
<icon settings></icon>
</button>
<a button large>
Right, Large
<icon name="ion-settings"></icon>
<icon settings></icon>
</a>
</div>
<div>
<button large>
<icon name="ion-heart"></icon>
<icon heart></icon>
</button>
<a button large>
<icon name="ion-heart"></icon>
<icon heart></icon>
</a>
</div>
<div>
<button small>
<icon name="ion-checkmark"></icon>
<icon checkmark></icon>
Left, Small
</button>
<a button small>
<icon name="ion-checkmark"></icon>
<icon checkmark></icon>
Left, Small
</a>
</div>
@@ -81,20 +81,20 @@
<div>
<button small>
Right, Small
<icon name="ion-forward"></icon>
<icon arrow-forward></icon>
</button>
<a button small>
Right, Small
<icon name="ion-forward"></icon>
<icon arrow-forward></icon>
</a>
</div>
<div>
<button small>
<icon name="ion-search"></icon>
<icon search></icon>
</button>
<a button small>
<icon name="ion-search"></icon>
<icon search></icon>
</a>
</div>

6
ionic/components/card/test/advanced/main.html
View File

@@ -20,12 +20,12 @@
<ion-item actions>
<button clear item-left>
<icon name="ion-star"></icon>
<icon star></icon>
Favorite
</button>
<button clear item-right>
<icon name="ion-reply"></icon>
Reply
<icon share></icon>
Share
</button>
</ion-item>

10
ionic/components/card/test/basic/main.html
View File

@@ -19,7 +19,7 @@
<ion-card>
<ion-item>
<icon name="ion-location" item-left></icon>
<icon pin item-left></icon>
ion-iteam in a card, icon left, button right
<button outline item-right>View</button>
</ion-item>
@@ -35,25 +35,25 @@
<ion-card>
<a ion-item href="#">
<icon name="ion-ionic" item-left></icon>
<icon wifi item-left></icon>
Card Link Item 1
<icon forward item-right></icon>
</a>
<a ion-item href="#">
<icon name="ion-ionic" item-left></icon>
<icon wine item-left></icon>
Card Link Item 2
<icon forward item-right></icon>
</a>
<button ion-item>
<icon name="ion-ionic" item-left></icon>
<icon warning item-left></icon>
Card Button Item 1
<icon forward item-right></icon>
</button>
<button ion-item>
<icon name="ion-ionic" item-left></icon>
<icon walk item-left></icon>
Card Button Item 2
<icon forward item-right></icon>
</button>

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

@@ -14,7 +14,8 @@ import {Button} from '../button/button';
properties: [
'name',
'ios',
'md'
'md',
'isActive'
],
host: {
'[attr.aria-label]': 'label',
@@ -42,11 +43,14 @@ export class Icon {
this.iconLeft = this.iconRight = this.iconOnly = false;
this.ariaHidden = true;
this.isInactive = ele.hasAttribute('inactive');
if (ele.hasAttribute('forward')) {
this.name = config.setting('forwardIcon');
}
this.iconAttr = null;
for (let i = 0, l = ele.attributes.length; i < l; i++) {
if (ele.attributes[i].value === '' && /_|item-|inactive|class/.test(ele.attributes[i].name) !== true) {
if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) {
this.iconAttr = ele.attributes[i].name;
}
}
@@ -83,25 +87,62 @@ export class Icon {
} else if (this.mode == 'md' && this.md) {
this.name = this.md;
} else if (!this.name && this.iconAttr) {
this.name = this.iconAttr;
} else {
this.name = (this.name ? this.name : this.iconAttr);
if (!(/^ion-/.test(this.name))) {
// not an exact icon being used
// add mode specific prefix
this.name = 'ion-' + this.mode + '-' + this.name;
}
}
if (!this.name) return;
// add the css class to show the icon font
this.renderer.setElementClass(this.elementRef, this.name, true);
// hide the icon when it's within a button
// and the button isn't an icon only button
this.ariaHidden = (this.withinButton && !this.iconOnly);
if (!this.ariaHidden) {
// the icon is either not within a button
// or the icon is within a button, and its an icon only button
this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' ');
this.update();
}
get isActive() {
return (this._isActive === undefined || this._isActive === true || this._isActive === 'true');
}
set isActive(val) {
this._isActive = val;
this.update();
}
update() {
if (this.name && this.mode == 'ios') {
if (this.isActive) {
if (/-outline/.test(this.name)) {
this.name = this.name.replace('-outline', '');
}
} else if (!(/-outline/.test(this.name))) {
this.name += '-outline';
}
}
if (this._name !== this.name) {
if (this._name) {
this.renderer.setElementClass(this.elementRef, this._name, false);
}
this._name = this.name;
this.renderer.setElementClass(this.elementRef, this.name, true);
if (!this.ariaHidden) {
// the icon is either not within a button
// or the icon is within a button, and its an icon only button
this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' ');
}
}
}
}

3
ionic/components/icon/test/basic/index.ts
View File

@@ -6,6 +6,7 @@ import {App} from 'ionic/ionic';
})
class E2EApp {
constructor() {
this.homeIcon = 'ion-home';
this.homeIcon = 'home';
this.isActive = false;
}
}

51
ionic/components/icon/test/basic/main.html
View File

@@ -8,23 +8,30 @@
<ion-list>
<ion-item>
<icon ion-home item-left></icon>
<icon home item-left></icon>
<code>
&lt;icon ion-home>&lt;/icon>
&lt;icon home>&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon inactive ion-home item-left></icon>
<icon home is-active="true" item-left></icon>
<code>
&lt;icon inactive ion-home>&lt;/icon>
&lt;icon home is-active="true">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon name="ion-home" item-left></icon>
<icon home is-active="false" item-left></icon>
<code>
&lt;icon name="ion-home">&lt;/icon>
&lt;icon home is-active="false">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon name="home" item-left></icon>
<code>
&lt;icon name="home">&lt;/icon>
</code>
</ion-item>
@@ -35,6 +42,13 @@
</code>
</ion-item>
<ion-item>
<icon ion-social-twitter item-left></icon>
<code>
&lt;icon ion-social-twitter>&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon ios="ion-social-apple" md="ion-social-android" item-left></icon>
<code>
@@ -43,12 +57,33 @@
</ion-item>
<ion-item>
<icon inactive ios="ion-social-apple" md="ion-social-android" item-left></icon>
<icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
<code>
&lt;icon inactive ios="ion-social-apple" md="ion-social-android">&lt;/icon>
&lt;icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon ios="ion-social-apple" item-left></icon>
<code>
&lt;icon ios="ion-social-apple">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon md="ion-social-android" item-left></icon>
<code>
&lt;icon md="ion-social-android">&lt;/icon>
</code>
</ion-item>
<ion-item>
<code>
&lt;icon forward>&lt;/icon>
</code>
<icon forward item-right></icon>
</ion-item>
</ion-list>
</ion-content>

2
ionic/components/item/item.scss
View File

@@ -48,7 +48,7 @@ ion-item-content {
white-space: normal;
}
.list .item > icon:first-child {
.item > icon:first-child {
min-width: 24px;
text-align: center;
}

18
ionic/components/item/test/buttons/main.html
View File

@@ -30,12 +30,12 @@
<ion-item>
<button item-left>
<icon name="ion-home"></icon>
<icon home></icon>
Left Icon
</button>
left icon buttons
<button outline item-right>
<icon name="ion-star"></icon>
<icon star></icon>
Left Icon
</button>
</ion-item>
@@ -43,37 +43,37 @@
<ion-item>
<button item-left>
Right Icon
<icon name="ion-home"></icon>
<icon home></icon>
</button>
right icon buttons
<button outline item-right>
Right Icon
<icon name="ion-star"></icon>
<icon star></icon>
</button>
</ion-item>
<ion-item>
<button item-left>
<icon name="ion-help-circled"></icon>
<icon help-circle></icon>
</button>
icon only buttons
<button item-right>
<icon name="ion-help-circled"></icon>
<icon help-circle></icon>
</button>
</ion-item>
<ion-item>
ion-item right icon/text button
<button item-right>
<icon name="ion-refresh"></icon>
<icon refresh></icon>
Refresh
</button>
</ion-item>
<ion-item>
<button clear item-left>
<icon name="ion-wrench"></icon>
Fix
<icon settings></icon>
Settings
</button>
ion-item left clear button
</ion-item>

24
ionic/components/item/test/icons/main.html
View File

@@ -19,45 +19,45 @@
<a ion-item href="#">
a[ion-item] w/ right side default icon
<icon name="ion-ios-information-outline" item-right></icon>
<icon information-circle item-right></icon>
</a>
<a ion-item href="#">
a[ion-item] w/ right side large icon
<icon large name="ion-ios-information-outline" item-right></icon>
<icon large information-circle item-right></icon>
</a>
<a ion-item href="#">
a[ion-item] w/ right side small icon
<icon small name="ion-ios-information-outline" item-right></icon>
<icon small information-circle item-right></icon>
</a>
<button ion-item>
<icon name="ion-star" item-left></icon>
<icon star item-left></icon>
button[ion-item] w/ left side icon
</button>
<button ion-item>
<icon name="ion-flag" item-left></icon>
<icon flag item-left></icon>
button[ion-item] w/ both side icons
<icon name="ion-ios-checkmark" item-right></icon>
<icon checkmark item-right></icon>
</button>
<ion-item>
<icon name="ion-flag" item-left></icon>
<icon flag item-left></icon>
ion-item w/ both side icons
<icon name="ion-ios-checkmark" item-right></icon>
<icon checkmark item-right></icon>
</ion-item>
<a ion-item href="#">
a[ion-item] w/ two right side icons
<icon name="ion-checkmark-circled" item-right></icon>
<icon name="ion-shuffle" item-right></icon>
<icon checkmark-circle item-right></icon>
<icon shuffle item-right></icon>
</a>
<button ion-item>
<icon name="ion-clipboard" item-left></icon>
<icon name="ion-minus-circled" item-left></icon>
<icon clipboard item-left></icon>
<icon remove-circle item-left></icon>
button[ion-item] w/ two left side icons
</button>

4
ionic/components/item/test/images/main.html
View File

@@ -7,12 +7,12 @@
</ion-item>
<ion-item>
<icon name="ion-email" item-left></icon>
<icon mail item-left></icon>
One Line w/ Icon, div only text
</ion-item>
<ion-item>
<icon name="ion-email" item-left></icon>
<icon mail item-left></icon>
<h2>Two Lines w/ Icon, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>

2
ionic/components/item/test/media/main.html
View File

@@ -62,7 +62,7 @@
<p>Icon on right</p>
<p>Vertically align top</p>
<p>button.item</p>
<icon name="ion-close-circled" item-right></icon>
<icon close-circle item-right></icon>
</button>
</ion-list>

20
ionic/components/list/test/headers/main.html
View File

@@ -7,7 +7,7 @@
</ion-header>
<ion-item>
<icon name="ion-wifi" item-left></icon>
<icon wifi item-left></icon>
Wifi
<div class="item-note" item-right>
Terrible
@@ -15,7 +15,7 @@
</ion-item>
<ion-item>
<icon name="ion-heart" item-left></icon>
<icon heart item-left></icon>
Affection
<div class="item-note" item-right>
Very Little
@@ -23,7 +23,7 @@
</ion-item>
<ion-item>
<icon name="ion-home" item-left></icon>
<icon home item-left></icon>
Home
<div class="item-note" item-right>
Where the heart is
@@ -40,7 +40,7 @@
</ion-header>
<ion-item>
<icon name="ion-wand" item-left></icon>
<icon color-wand item-left></icon>
Magic
<div class="item-note" item-right>
Activated
@@ -48,7 +48,7 @@
</ion-item>
<ion-item>
<icon name="ion-star" item-left></icon>
<icon star item-left></icon>
Star status
<div class="item-note" item-right>
Super
@@ -65,7 +65,7 @@
</ion-header>
<ion-item>
<icon name="ion-pizza" item-left></icon>
<icon pizza item-left></icon>
Pizza
<div class="item-note" item-right>
Always
@@ -73,7 +73,7 @@
</ion-item>
<ion-item>
<icon name="ion-beer" item-left></icon>
<icon beer item-left></icon>
Beer
<div class="item-note" item-right>
Yes Plz
@@ -81,7 +81,7 @@
</ion-item>
<ion-item>
<icon name="ion-wineglass" item-left></icon>
<icon wine item-left></icon>
Wine
<div class="item-note" item-right>
All the time
@@ -94,12 +94,12 @@
<ion-list>
<ion-item>
<icon name="ion-chatbox" item-left></icon>
<icon chatboxes item-left></icon>
New List, no header, Item 1
</ion-item>
<ion-item>
<icon name="ion-chatbox" item-left></icon>
<icon chatboxes item-left></icon>
New List, no header, Item 2
</ion-item>

2
ionic/components/list/test/inset/main.html
View File

@@ -16,7 +16,7 @@
<ion-list inset>
<ion-item>
<icon name="ion-location" item-left></icon>
<icon pin item-left></icon>
All Out Inset List
<button outline item-right>View</button>
</ion-item>

2
ionic/components/tabs/tabs.ts
View File

@@ -20,7 +20,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
'<nav class="tab-bar-container">' +
'<div class="tab-bar" role="tablist">' +
'<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
'<icon [name]="t.tabIcon" class="tab-button-icon"></icon>' +
'<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
'<span class="tab-button-text">{{t.tabTitle}}</span>' +
'</button>' +
'</div>' +

4
ionic/components/tabs/test/basic/main.html
View File

@@ -1,7 +1,7 @@
<ion-tabs>
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
<ion-tab tab-title="Tab 1" tab-icon="home">
<ion-content class="padding">
Tab 1 Content
@@ -9,7 +9,7 @@
</ion-tab>
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
<ion-tab tab-title="Tab 2" tab-icon="star">
<ion-content class="padding">
Tab 2 Content

8
ionic/components/text-input/test/fixed-inline-labels/main.html
View File

@@ -20,7 +20,7 @@
<ion-label>From</ion-label>
<input value="Text 3" type="text">
<button clear item-right>
<icon name="ion-power"></icon>
<icon power></icon>
</button>
</ion-input>
@@ -30,19 +30,19 @@
</ion-input>
<ion-input fixed-label>
<icon name="ion-earth" item-left></icon>
<icon globe item-left></icon>
<ion-label>Website</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input fixed-label>
<icon name="ion-email" item-left></icon>
<icon mail item-left></icon>
<ion-label>Email</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input fixed-label>
<icon name="ion-earth" item-left></icon>
<icon globe item-left></icon>
<ion-label>Phone</ion-label>
<input value="867-5309" type="tel">
</ion-input>

10
ionic/components/text-input/test/inline-labels/main.html
View File

@@ -20,7 +20,7 @@
<ion-label>From:</ion-label>
<input value="Text 3" type="text">
<button clear item-right>
<icon name="ion-power"></icon>
<icon power></icon>
</button>
</ion-input>
@@ -30,19 +30,19 @@
</ion-input>
<ion-input>
<icon name="ion-earth" item-left></icon>
<icon globe item-left></icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<icon name="ion-email" item-left></icon>
<icon mail item-left></icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<icon name="ion-edit" item-left></icon>
<icon create item-left></icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
@@ -50,7 +50,7 @@
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon name="ion-flag" item-right></icon>
<icon flag item-right></icon>
</ion-input>
<ion-input>

14
ionic/components/text-input/test/inset-inputs/main.html
View File

@@ -8,13 +8,13 @@
<ion-list inset>
<ion-input>
<icon name="ion-search" item-left></icon>
<icon search item-left></icon>
<input value="Input inside an inset list" type="text">
</ion-input>
<ion-input>
<input value="Input inside an inset list" type="text">
<icon name="ion-ios-mic" item-right></icon>
<icon mic item-right></icon>
</ion-input>
</ion-list>
@@ -23,13 +23,13 @@
<ion-list inset>
<ion-input inset>
<icon name="ion-search" item-left></icon>
<icon search item-left></icon>
<input value="Inset input inside an inset list" type="text">
</ion-input>
<ion-input inset>
<input value="Inset input inside an inset list" type="text">
<icon name="ion-ios-mic" item-right></icon>
<icon mic item-right></icon>
</ion-input>
</ion-list>
@@ -38,7 +38,7 @@
<ion-list>
<ion-input inset>
<icon name="ion-search" item-left></icon>
<icon search item-left></icon>
<input value="Inset input inside a list" type="text">
<button outline item-right>Search</button>
</ion-input inset>
@@ -49,13 +49,13 @@
<ion-card>
<ion-input>
<icon name="ion-search" item-left></icon>
<icon search item-left></icon>
<input value="Input inside a card" type="text">
</ion-input>
<ion-input>
<input value="Input inside a card" type="text">
<icon name="ion-ios-mic" item-right></icon>
<icon mic item-right></icon>
</ion-input>
</ion-card>

4
ionic/components/text-input/test/placeholder-labels/main.html
View File

@@ -15,12 +15,12 @@
</ion-input>
<ion-input>
<icon name="ion-ios-telephone" item-left></icon>
<icon call item-left></icon>
<input placeholder="Text Input Placeholder" type="text">
</ion-input>
<ion-input>
<icon name="ion-android-call" item-left></icon>
<icon call item-left></icon>
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
</ion-input>

24
ionic/components/toolbar/test/scenarios/main.html
View File

@@ -7,43 +7,43 @@
<ion-toolbar>
<ion-nav-items primary>
<button>
<icon name="ion-navicon"></icon>
<icon menu></icon>
</button>
<button>
<icon name="ion-heart"></icon>
<icon heart></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button>
<icon name="ion-more"></icon>
<icon more-horizontal></icon>
</button>
</ion-nav-items>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="hover"><icon name="ion-navicon"></icon></button><button class="hover"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="hover"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="hover"><icon menu></icon></button><button class="hover"><icon heart></icon></button></ion-nav-items><ion-nav-items secondary><button class="hover"><icon more-horizontal></icon></button></ion-nav-items><ion-title>Defaults.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="activated"><icon name="ion-navicon"></icon></button><button class="activated"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="activated"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button class="activated"><icon menu></icon></button><button class="activated"><icon heart></icon></button></ion-nav-items><ion-nav-items secondary><button class="activated"><icon more-horizontal></icon></button></ion-nav-items><ion-title>Defaults.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear><icon name="ion-flag"></icon></button><button clear><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary>Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear><icon flag></icon></button><button clear><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary>Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="hover"><icon name="ion-flag"></icon></button><button clear class="hover"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="hover">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="hover"><icon flag></icon></button><button clear class="hover"><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="hover">Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="activated"><icon name="ion-flag"></icon></button><button clear class="activated"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="activated">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button clear class="activated"><icon flag></icon></button><button clear class="activated"><icon menu></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="activated">Help<icon help-circle></icon></button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline><icon name="ion-navicon"></icon></button primary><button outline><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline><icon menu></icon></button primary><button outline><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon flag></icon></button></ion-nav-items><ion-title>Outline</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="hover"><icon name="ion-navicon"></icon></button primary><button outline class="hover"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="hover"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="hover"><icon menu></icon></button primary><button outline class="hover"><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="hover"><icon flag></icon></button></ion-nav-items><ion-title>Outline.hover</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="activated"><icon name="ion-navicon"></icon></button primary><button outline class="activated"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="activated"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button outline class="activated"><icon menu></icon></button primary><button outline class="activated"><icon star></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="activated"><icon flag></icon></button></ion-nav-items><ion-title>Outline.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>ColorAttr</ion-title></ion-toolbar>
@@ -55,7 +55,7 @@
<ion-toolbar><ion-nav-items primary><button class="activated">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="activated">Btn</button></ion-nav-items><ion-title>ColorAttr.activated</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button>Edit<icon name="ion-edit"></icon></button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon menu></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button>Edit<icon create></icon></button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>