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

docs(): update icon demo docs

Browse Source
This commit is contained in:
Adam Bradley
2016-01-06 21:02:52 -06:00
parent 5cccbe9ba8
commit 1d6843753a
17 changed files with 187 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demos/animations/main.html
View File

@ -18,16 +18,15 @@
<img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
<div style="position:absolute; bottom: 0; display:inline;">
<button icon pause primary (click)="pause($event)">
<button primary (click)="pause($event)">
Pause
<icon pause></icon>
<ion-icon name="pause"></ion-icon>
</button>
<button icon play secondary (click)="play($event)">
<button secondary (click)="play($event)">
Play
<icon play></icon>
<ion-icon name="play"></ion-icon>
</button>
</div>
</body>
</html>

10
demos/buttons/main.html
View File

@ -60,7 +60,7 @@
<button secondary round outline>Outline + Round</button>
</p>
<p>
<p>
<button secondary fab outline style="position: relative;">FAB</button>
</p>
@ -68,7 +68,7 @@
<p>
<button dark>
<icon star></icon>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</p>
@ -76,13 +76,13 @@
<p>
<button dark>
Right Icon
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
</p>
<p>
<button dark>
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
</p>
@ -101,6 +101,4 @@
<button light small>Small</button>
</p>
</ion-content>

14
demos/cards/main.html
View File

@ -1,5 +1,7 @@
<ion-toolbar><ion-title>Cards</ion-title></ion-toolbar>
<ion-toolbar>
<ion-title>Cards</ion-title>
</ion-toolbar>
<ion-content class="outer-content" style="background:#eee">
@ -20,7 +22,7 @@
<ion-card>
<ion-item>
<icon pin item-left></icon>
<ion-icon name="pin" item-left></ion-icon>
ion-iteam in a card, icon left, button right
<button outline item-right>View</button>
</ion-item>
@ -36,22 +38,22 @@
<ion-card>
<a ion-item href="#">
<icon wifi item-left></icon>
<ion-icon name="wifi" item-left></ion-icon>
Card Link Item 1
</a>
<a ion-item href="#">
<icon wine item-left></icon>
<ion-icon name="wine" item-left></ion-icon>
Card Link Item 2
</a>
<button ion-item>
<icon warning item-left></icon>
<ion-icon name="warning" item-left></ion-icon>
Card Button Item 1
</button>
<button ion-item>
<icon walk item-left></icon>
<ion-icon name="walk" item-left></ion-icon>
Card Button Item 2
</button>

5
demos/component-docs/action-sheets/basic/styles.scss
View File

@ -13,6 +13,7 @@
padding-top: 1px;
}
.md .action-sheet-cancel icon, .md .action-sheet-destructive icon {
.md .action-sheet-cancel ion-icon,
.md .action-sheet-destructive ion-icon {
color: #757575;
}
}

6
demos/component-docs/badge/basic/template.html
View File

@ -14,18 +14,18 @@
Björk
</h2>
<p>
Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the Sugarcubes, but when...
Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the Sugarcubes, but when...
</p>
</ion-card-content>
<ion-item>
<ion-icon name='musical-notes' item-left style="color: #d03e84"></ion-icon>
<ion-icon name="musical-notes" item-left style="color: #d03e84"></ion-icon>
Albums
<ion-badge item-right>9</ion-badge>
</ion-item>
<ion-item>
<ion-icon name='ion-social-twitter' item-left style="color: #55acee"></ion-icon>
<ion-icon name="twitter-logo" item-left style="color: #55acee"></ion-icon>
Followers
<ion-badge item-right>260k</ion-badge>
</ion-item>

10
demos/component-docs/buttons/components/components.html
View File

@ -4,12 +4,12 @@
<ion-buttons start>
<button>
<ion-icon name='contact'></ion-icon>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button>
<ion-icon name='search'></ion-icon>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
@ -29,7 +29,7 @@
</ion-item>
</ion-card>
<ion-list>
<ion-item>
@ -40,7 +40,7 @@
<ion-item>
Left Icon Button
<button item-right outline>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</ion-item>
@ -49,7 +49,7 @@
Right Icon Button
<button item-right outline>
Right Icon
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
</button>
</ion-item>

12
demos/component-docs/buttons/fab/fab.html
View File

@ -5,24 +5,20 @@
<ion-content class="has-header components-demo">
<p>
<button fab primary fab-top fab-left>
<ion-icon name='add'></ion-icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab secondary fab-top fab-center>
<ion-icon name='compass' is-active="false"></ion-icon>
<ion-icon name="compass" is-active="false"></ion-icon>
</button>
<button fab danger fab-top fab-right>
<ion-icon name='mic' is-active="false"></ion-icon>
<ion-icon name="mic" is-active="false"></ion-icon>
</button>
<!-- <button fab dark fab-bottom fab-center id="demo-fab-bottom">
<ion-icon name=' is-active="false" heart></ion-icon>
</button> -->
</p>
</ion-content>
<button fab dark fab-bottom fab-center style="z-index: 999">
<ion-icon name='heart' is-active="false"></ion-icon>
<ion-icon name="heart" is-active="false"></ion-icon>
</button>
<ion-toolbar id="subtle-footer">
</ion-toolbar>

28
demos/component-docs/buttons/icons/icons.html
View File

@ -7,70 +7,70 @@
<p>
<button light>
<ion-icon name='arrow-back'></ion-icon>
<ion-icon name="arrow-back"></ion-icon>
Back
</button>
<button light>
<ion-icon name='arrow-down'></ion-icon>
<ion-icon name="arrow-down"></ion-icon>
</button>
<button light>
<ion-icon name='arrow-up'></ion-icon>
<ion-icon name="arrow-up"></ion-icon>
</button>
<button light>
Next
<ion-icon name='arrow-forward'></ion-icon>
<ion-icon name="arrow-forward"></ion-icon>
</button>
</p>
<p>
<button>
<ion-icon name='home'></ion-icon>
<ion-icon name="home"></ion-icon>
Home
</button>
<button outline >
<ion-icon name='briefcase' is-active="false"></ion-icon>
<ion-icon name="briefcase" is-active="false"></ion-icon>
Work
</button>
<button clear>
<ion-icon name='beer' is-active="false"></ion-icon>
<ion-icon name="beer" is-active="false"></ion-icon>
Pub
</button>
</p>
<p>
<button secondary>
<ion-icon name='people'></ion-icon>
<ion-icon name="people"></ion-icon>
Friends
</button>
<button secondary outline>
<ion-icon name='paw' is-active="false"></ion-icon>
<ion-icon name="paw" is-active="false"></ion-icon>
Best Friend
</button>
</p>
<p>
<button danger>
<ion-icon name='close'></ion-icon>
<ion-icon name="close"></ion-icon>
Remove
</button>
<button danger outline>
<ion-icon name='remove-circle' is-active="false"></ion-icon>
<ion-icon name="remove-circle" is-active="false"></ion-icon>
</button>
<button danger clear>
<ion-icon name='trash' is-active="false"></ion-icon>
<ion-icon name="trash" is-active="false"></ion-icon>
</button>
</p>
<p>
<button dark round>
<ion-icon name='construct' is-active="false"></ion-icon>
<ion-icon name="construct" is-active="false"></ion-icon>
Tools
</button>
<button dark clear>
<ion-icon name='hammer' is-active="false"></ion-icon>
<ion-icon name="hammer" is-active="false"></ion-icon>
</button>
</p>

30
demos/component-docs/cards/advanced-map/template.html
View File

@ -9,19 +9,19 @@
<div style="position: relative">
<img src="img/advance-card-map-madison.png">
<button fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='football'></ion-icon>
<ion-icon name="football"></ion-icon>
</ion-avatar>
<h2>Museum of Football</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='wine'></ion-icon>
<ion-icon name="wine"></ion-icon>
</ion-avatar>
<h2>Institute of Fine Cocktails</h2>
<p>14 S. Hop Avenue, Madison, WI 53703</p>
@ -30,7 +30,7 @@
<span item-left class="item-bold">18 min</span>
<span item-left class="item-subtle">(2.6 mi)</span>
<button primary clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -41,19 +41,19 @@
<div style="position: relative">
<img src="img/advance-card-map-mario.png">
<button danger fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='cloud'></ion-icon>
<ion-icon name="cloud"></ion-icon>
</ion-avatar>
<h2>Yoshi's Island</h2>
<h2>Yoshi"s Island</h2>
<p>Iggy Koopa</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='leaf'></ion-icon>
<ion-icon name="leaf"></ion-icon>
</ion-avatar>
<h2>Forest of Illusion</h2>
<p>Roy Koopa</p>
@ -62,7 +62,7 @@
<span item-left class="item-bold">3 hr</span>
<span item-left class="item-subtle">(4.8 mi)</span>
<button danger clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -73,19 +73,19 @@
<div style="position: relative">
<img src="img/advance-card-map-paris.png">
<button secondary fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='information-circle'></ion-icon>
<ion-icon name="information-circle"></ion-icon>
</ion-avatar>
<h2>Museum of Information</h2>
<p>44 Rue de Info, 75010 Paris, France</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='leaf'></ion-icon>
<ion-icon name="leaf"></ion-icon>
</ion-avatar>
<h2>General Pharmacy</h2>
<p>1 Avenue Faux, 75010 Paris, France</p>
@ -94,7 +94,7 @@
<span item-left secondary class="item-bold">26 min</span>
<span item-left class="item-subtle">(8.1 mi)</span>
<button secondary clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -103,7 +103,3 @@
</ion-content>

22
demos/component-docs/cards/advanced-social/template.html
View File

@ -23,15 +23,15 @@
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
<p item-left class="time-ago">
11h ago
11h ago
</p>
</ion-item>
@ -56,15 +56,15 @@
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>30 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>64 Comments</div>
</button>
<p item-left class="time-ago">
30yr ago
30yr ago
</p>
</ion-item>
@ -84,16 +84,16 @@
<img src="img/advance-card-jp.jpg">
<ion-card-content>
<p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p>
<p>Your scientists were so preoccupied with whether or not they could, that they didn"t stop to think if they should.</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>46 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>66 Comments</div>
</button>
<p item-left class="time-ago">2d ago</p>
@ -103,7 +103,3 @@
</ion-content>

10
demos/component-docs/cards/advanced-weather/template.html
View File

@ -14,7 +14,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='moon'></ion-icon>
<ion-icon name="moon"></ion-icon>
<span>23&deg;</span>
</p>
@ -34,7 +34,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='sunny'></ion-icon>
<ion-icon name="sunny"></ion-icon>
<span>78&deg;</span>
</p>
@ -54,7 +54,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='thunderstorm'></ion-icon>
<ion-icon name="thunderstorm"></ion-icon>
<span>41&deg;</span>
</p>
@ -67,7 +67,3 @@
</ion-content>

32
demos/component-docs/cards/image/template.html
View File

@ -14,21 +14,21 @@
Nine Inch Nails Live
</h2>
<p>
The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -46,21 +46,21 @@
Erykah Badu
</h2>
<p>
American singer-songwriter, record producer, activist, and actress, Badu's style is a prime example of neo-soul.
American singer-songwriter, record producer, activist, and actress, Badu"s style is a prime example of neo-soul.
</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -84,15 +84,15 @@
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -116,15 +116,15 @@
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -134,7 +134,3 @@
</ion-content>

12
demos/component-docs/cards/list/template.html
View File

@ -12,32 +12,32 @@
<ion-list>
<button ion-item>
<ion-icon name='cart' item-left></ion-icon>
<ion-icon name="cart" item-left></ion-icon>
Shopping
</button>
<button ion-item>
<ion-icon name='medical' item-left></ion-icon>
<ion-icon name="medical" item-left></ion-icon>
Hospital
</button>
<button ion-item>
<ion-icon name='cafe' item-left></ion-icon>
<ion-icon name="cafe" item-left></ion-icon>
Cafe
</button>
<button ion-item>
<ion-icon name='paw' item-left></ion-icon>
<ion-icon name="paw" item-left></ion-icon>
Dog Park
</button>
<button ion-item>
<ion-icon name='beer' item-left></ion-icon>
<ion-icon name="beer" item-left></ion-icon>
Pub
</button>
<button ion-item>
<ion-icon name='planet' item-left></ion-icon>
<ion-icon name="planet" item-left></ion-icon>
Space
</button>

66
demos/component-docs/icons/basic/template.html
View File

@ -6,69 +6,69 @@
<ion-content class="has-header preview-icons">
<ion-row>
<ion-col><ion-icon name='ionic'></ion-icon></ion-col>
<ion-col><ion-icon name='ion-social-angular'></ion-icon></ion-col>
<ion-col><ion-icon name='ionitron'></ion-icon></ion-col>
<ion-col><ion-icon name="ionic"></ion-icon></ion-col>
<ion-col><ion-icon name="angular-logo"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='heart'></ion-icon></ion-col>
<ion-col><ion-icon name='apps'></ion-icon></ion-col>
<ion-col><ion-icon name='happy'></ion-icon></ion-col>
<ion-col><ion-icon name="heart"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="happy"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='people'></ion-icon></ion-col>
<ion-col><ion-icon name='person'></ion-icon></ion-col>
<ion-col><ion-icon name='contact'></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='lock'></ion-icon></ion-col>
<ion-col><ion-icon name='key'></ion-icon></ion-col>
<ion-col><ion-icon name='unlock'></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='map'></ion-icon></ion-col>
<ion-col><ion-icon name='navigate'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name="map"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='mic'></ion-icon></ion-col>
<ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
<ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='cafe'></ion-icon></ion-col>
<ion-col><ion-icon name='calculator'></ion-icon></ion-col>
<ion-col><ion-icon name='bus'></ion-icon></ion-col>
<ion-col><ion-icon name="cafe"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
<ion-col><ion-icon name='cube'></ion-icon></ion-col>
<ion-col><ion-icon name='image'></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="cube"></ion-icon></ion-col>
<ion-col><ion-icon name="image"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='star'></ion-icon></ion-col>
<ion-col><ion-icon name='wine'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name="star"></ion-icon></ion-col>
<ion-col><ion-icon name="wine"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='sunny'></ion-icon></ion-col>
<ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
<ion-col><ion-icon name='rainy'></ion-icon></ion-col>
<ion-col><ion-icon name="sunny"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy"></ion-icon></ion-col>
</ion-row>
</ion-content>

10
demos/component-docs/navigation/basic/navigation.html
View File

@ -7,24 +7,24 @@
<ion-list>
<button ion-item (click)="openNavDetailsPage('Angular')">
<ion-icon name='ion-social-angular' item-left></ion-icon>
<ion-icon name='angular-logo' item-left></ion-icon>
Angular
</button>
<button ion-item (click)="openNavDetailsPage('CSS3')">
<ion-icon name='ion-social-css3' item-left></ion-icon>
<ion-icon name='css3-logo' item-left></ion-icon>
CSS3
</button>
<button ion-item (click)="openNavDetailsPage('HTML5')">
<ion-icon name='ion-social-html5' item-left></ion-icon>
<ion-icon name='html5-logo' item-left></ion-icon>
HTML5
</button>
<button ion-item (click)="openNavDetailsPage('Sass')">
<ion-icon name='ion-social-sass' item-left></ion-icon>
<ion-icon name='sass-logo' item-left></ion-icon>
Sass
</button>
</ion-list>
</ion-content>
</ion-content>

8
demos/component-docs/navigation/basic/pages.ts
View File

@ -18,10 +18,10 @@ class NavigationDetailsPage {
'Sass': "Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension."
};
var navIcons = {
'Angular': 'ion-social-angular',
'CSS3': 'ion-social-css3',
'HTML5': 'ion-social-html5',
'Sass': 'ion-social-sass'
'Angular': 'angular-logo',
'CSS3': 'css3-logo',
'HTML5': 'html5-logo',
'Sass': 'sass-logo'
};
this.selection['content'] = navData[this.selection.title];
this.selection['icon'] = navIcons[this.selection.title];

113
demos/icons/main.html
View File

@ -5,73 +5,70 @@
<ion-content>
<ion-list>
<ion-list>
<ion-list-header>
Favorite Icons
</ion-list-header>
<ion-list-header>
Favorite Icons
</ion-list-header>
<ion-toggle>
<icon wifi item-left></icon>
Wifi
</ion-toggle>
<ion-toggle>
<ion-icon name="wifi" item-left></ion-icon>
Wifi
</ion-toggle>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="heart" item-left></ion-icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-toggle checked="true">
<icon color-wand item-left></icon>
Magic
</ion-toggle>
<ion-toggle checked="true">
<ion-icon name="color-wand" item-left></ion-icon>
Magic
</ion-toggle>
<ion-item>
<icon star item-left></icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="star" item-left></ion-icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
<ion-item>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="beer" item-left></ion-icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="wine" item-left></ion-icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>