javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +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"> <img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
<div style="position:absolute; bottom: 0; display:inline;"> <div style="position:absolute; bottom: 0; display:inline;">
<button icon pause primary (click)="pause($event)"> <button primary (click)="pause($event)">
Pause Pause
<icon pause></icon> <ion-icon name="pause"></ion-icon>
</button> </button>
<button icon play secondary (click)="play($event)"> <button secondary (click)="play($event)">
Play Play
<icon play></icon> <ion-icon name="play"></ion-icon>
</button> </button>
</div> </div>
</body> </body>
</html> </html>

8
demos/buttons/main.html
View File

@ -68,7 +68,7 @@
<p> <p>
<button dark> <button dark>
<icon star></icon> <ion-icon name="star"></ion-icon>
Left Icon Left Icon
</button> </button>
</p> </p>
@ -76,13 +76,13 @@
<p> <p>
<button dark> <button dark>
Right Icon Right Icon
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</p> </p>
<p> <p>
<button dark> <button dark>
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</p> </p>
@ -101,6 +101,4 @@
<button light small>Small</button> <button light small>Small</button>
</p> </p>
</ion-content> </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"> <ion-content class="outer-content" style="background:#eee">
@ -20,7 +22,7 @@
<ion-card> <ion-card>
<ion-item> <ion-item>
<icon pin item-left></icon> <ion-icon name="pin" item-left></ion-icon>
ion-iteam in a card, icon left, button right ion-iteam in a card, icon left, button right
<button outline item-right>View</button> <button outline item-right>View</button>
</ion-item> </ion-item>
@ -36,22 +38,22 @@
<ion-card> <ion-card>
<a ion-item href="#"> <a ion-item href="#">
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Card Link Item 1 Card Link Item 1
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Card Link Item 2 Card Link Item 2
</a> </a>
<button ion-item> <button ion-item>
<icon warning item-left></icon> <ion-icon name="warning" item-left></ion-icon>
Card Button Item 1 Card Button Item 1
</button> </button>
<button ion-item> <button ion-item>
<icon walk item-left></icon> <ion-icon name="walk" item-left></ion-icon>
Card Button Item 2 Card Button Item 2
</button> </button>

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

@ -13,6 +13,7 @@
padding-top: 1px; 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; color: #757575;
} }

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

@ -19,13 +19,13 @@
</ion-card-content> </ion-card-content>
<ion-item> <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 Albums
<ion-badge item-right>9</ion-badge> <ion-badge item-right>9</ion-badge>
</ion-item> </ion-item>
<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 Followers
<ion-badge item-right>260k</ion-badge> <ion-badge item-right>260k</ion-badge>
</ion-item> </ion-item>

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

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

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

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

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

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

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

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

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

@ -23,11 +23,11 @@
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div> <div>12 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='text'></ion-icon> <ion-icon name="text"></ion-icon>
<div>4 Comments</div> <div>4 Comments</div>
</button> </button>
<p item-left class="time-ago"> <p item-left class="time-ago">
@ -56,11 +56,11 @@
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>30 Likes</div> <div>30 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='text'></ion-icon> <ion-icon name="text"></ion-icon>
<div>64 Comments</div> <div>64 Comments</div>
</button> </button>
<p item-left class="time-ago"> <p item-left class="time-ago">
@ -84,16 +84,16 @@
<img src="img/advance-card-jp.jpg"> <img src="img/advance-card-jp.jpg">
<ion-card-content> <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-card-content>
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon> <ion-icon name="thumbs-up"></ion-icon>
<div>46 Likes</div> <div>46 Likes</div>
</button> </button>
<button primary clear item-left> <button primary clear item-left>
<ion-icon name='text'></ion-icon> <ion-icon name="text"></ion-icon>
<div>66 Comments</div> <div>66 Comments</div>
</button> </button>
<p item-left class="time-ago">2d ago</p> <p item-left class="time-ago">2d ago</p>
@ -103,7 +103,3 @@
</ion-content> </ion-content>

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

@ -14,7 +14,7 @@
</ion-item> </ion-item>
<p class="advanced-background-title advanced-background-title-large"> <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> <span>23&deg;</span>
</p> </p>
@ -34,7 +34,7 @@
</ion-item> </ion-item>
<p class="advanced-background-title advanced-background-title-large"> <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> <span>78&deg;</span>
</p> </p>
@ -54,7 +54,7 @@
</ion-item> </ion-item>
<p class="advanced-background-title advanced-background-title-large"> <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> <span>41&deg;</span>
</p> </p>
@ -67,7 +67,3 @@
</ion-content> </ion-content>

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

@ -20,15 +20,15 @@
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button clear item-left danger> <button clear item-left danger>
<ion-icon name='star'></ion-icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
<button clear item danger> <button clear item danger>
<ion-icon name='musical-notes'></ion-icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
<button clear item-right danger> <button clear item-right danger>
<ion-icon name='share-alt'></ion-icon> <ion-icon name="share-alt"></ion-icon>
Share Share
</button> </button>
</ion-item> </ion-item>
@ -46,21 +46,21 @@
Erykah Badu Erykah Badu
</h2> </h2>
<p> <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> </p>
</ion-card-content> </ion-card-content>
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button clear item-left danger> <button clear item-left danger>
<ion-icon name='star'></ion-icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
<button clear item danger> <button clear item danger>
<ion-icon name='musical-notes'></ion-icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
<button clear item-right danger> <button clear item-right danger>
<ion-icon name='share-alt'></ion-icon> <ion-icon name="share-alt"></ion-icon>
Share Share
</button> </button>
</ion-item> </ion-item>
@ -84,15 +84,15 @@
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button clear item-left danger> <button clear item-left danger>
<ion-icon name='star'></ion-icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
<button clear item danger> <button clear item danger>
<ion-icon name='musical-notes'></ion-icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
<button clear item-right danger> <button clear item-right danger>
<ion-icon name='share-alt'></ion-icon> <ion-icon name="share-alt"></ion-icon>
Share Share
</button> </button>
</ion-item> </ion-item>
@ -116,15 +116,15 @@
<ion-item actions class="demo-card"> <ion-item actions class="demo-card">
<button clear item-left danger> <button clear item-left danger>
<ion-icon name='star'></ion-icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
<button clear item danger> <button clear item danger>
<ion-icon name='musical-notes'></ion-icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
<button clear item-right danger> <button clear item-right danger>
<ion-icon name='share-alt'></ion-icon> <ion-icon name="share-alt"></ion-icon>
Share Share
</button> </button>
</ion-item> </ion-item>
@ -134,7 +134,3 @@
</ion-content> </ion-content>

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

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

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

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

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

@ -7,22 +7,22 @@
<ion-list> <ion-list>
<button ion-item (click)="openNavDetailsPage('Angular')"> <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 Angular
</button> </button>
<button ion-item (click)="openNavDetailsPage('CSS3')"> <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 CSS3
</button> </button>
<button ion-item (click)="openNavDetailsPage('HTML5')"> <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 HTML5
</button> </button>
<button ion-item (click)="openNavDetailsPage('Sass')"> <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 Sass
</button> </button>

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." 'Sass': "Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension."
}; };
var navIcons = { var navIcons = {
'Angular': 'ion-social-angular', 'Angular': 'angular-logo',
'CSS3': 'ion-social-css3', 'CSS3': 'css3-logo',
'HTML5': 'ion-social-html5', 'HTML5': 'html5-logo',
'Sass': 'ion-social-sass' 'Sass': 'sass-logo'
}; };
this.selection['content'] = navData[this.selection.title]; this.selection['content'] = navData[this.selection.title];
this.selection['icon'] = navIcons[this.selection.title]; this.selection['icon'] = navIcons[this.selection.title];

19
demos/icons/main.html
View File

@ -12,12 +12,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -25,7 +25,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is
@ -33,12 +33,12 @@
</ion-item> </ion-item>
<ion-toggle checked="true"> <ion-toggle checked="true">
<icon color-wand item-left></icon> <ion-icon name="color-wand" item-left></ion-icon>
Magic Magic
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon star item-left></icon> <ion-icon name="star" item-left></ion-icon>
Star status Star status
<ion-note item-right> <ion-note item-right>
Super Super
@ -46,7 +46,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon pizza item-left></icon> <ion-icon name="pizza" item-left></ion-icon>
Pizza Pizza
<ion-note item-right> <ion-note item-right>
Always Always
@ -54,7 +54,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon beer item-left></icon> <ion-icon name="beer" item-left></ion-icon>
Beer Beer
<ion-note item-right> <ion-note item-right>
Yes Plz Yes Plz
@ -62,7 +62,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Wine Wine
<ion-note item-right> <ion-note item-right>
All the time All the time
@ -71,7 +71,4 @@
</ion-list> </ion-list>
</ion-content> </ion-content>