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"> <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>

10
demos/buttons/main.html
View File

@ -60,7 +60,7 @@
<button secondary round outline>Outline + Round</button> <button secondary round outline>Outline + Round</button>
</p> </p>
<p> <p>
<button secondary fab outline style="position: relative;">FAB</button> <button secondary fab outline style="position: relative;">FAB</button>
</p> </p>
@ -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>

5
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;
} }

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

@ -14,18 +14,18 @@
Björk Björk
</h2> </h2>
<p> <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> </p>
</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>

10
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>
@ -29,7 +29,7 @@
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-list> <ion-list>
<ion-item> <ion-item>
@ -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>

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

@ -23,15 +23,15 @@
<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">
11h ago 11h ago
</p> </p>
</ion-item> </ion-item>
@ -56,15 +56,15 @@
<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">
30yr ago 30yr ago
</p> </p>
</ion-item> </ion-item>
@ -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>

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

@ -14,21 +14,21 @@
Nine Inch Nails Live Nine Inch Nails Live
</h2> </h2>
<p> <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> </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>
@ -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>

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

@ -7,24 +7,24 @@
<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>
</ion-list> </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." '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];

113
demos/icons/main.html
View File

@ -5,73 +5,70 @@
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-list-header> <ion-list-header>
Favorite Icons Favorite Icons
</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
</ion-note> </ion-note>
</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
</ion-note> </ion-note>
</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
</ion-note> </ion-note>
</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
</ion-note> </ion-note>
</ion-item> </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="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> </ion-content>