javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): add icon API demo

Browse Source 
references #5311
This commit is contained in:
Brandy Carney
2016-02-03 17:40:17 -05:00
parent ec106e989e
commit 1e9a776944
3 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demos/icon/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class ApiDemoApp {}

71
demos/icon/main.html Normal file
View File

@ -0,0 +1,71 @@
<ion-toolbar>
<ion-title>Icon</ion-title>
</ion-toolbar>
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name='ionic' primary></ion-icon></ion-col>
<ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>
<ion-col><ion-icon name='heart' danger></ion-icon></ion-col>
<ion-col><ion-icon name='ionitron' primary></ion-icon></ion-col>
<ion-col><ion-icon name='happy'></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-col><ion-icon name='apps'></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-col><ion-icon name='map' secondary></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='locate'></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-col><ion-icon name='microphone'></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-col><ion-icon name='wine' danger></ion-icon></ion-col>
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
<ion-col><ion-icon name='image' secondary></ion-icon></ion-col>
<ion-col><ion-icon name='star'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropup-circle'></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-col><ion-icon name='cloud'></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' primary></ion-icon></ion-col>
</ion-row>
</ion-content>
<style>
.icon-demo ion-icon {
font-size: 50px;
}
.icon-demo ion-row {
height: 100%;
padding: 0;
flex-wrap: wrap;
}
.icon-demo ion-col {
flex: 0 0 25%;
max-width: 25%;
text-align: center;
padding: 10px 5px;
}
</style>

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

@ -38,6 +38,7 @@ import {Config} from '../../config/config';
* inactive icon on iOS will use an outlined version of the icon same icon.
* Material Design icons do not change appearance depending if they're active
* or not. The `isActive` property is largely used by the tabbar.
* @demo /docs/v2/demos/icon/
* @see {@link /docs/v2/components#icons Icon Component Docs}
*
*/