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

test(icon): update basic test to match v3 test

Browse Source
This commit is contained in:
Brandy Carney
2018-01-10 14:52:37 -05:00
parent 88cad7120b
commit 3bebe311cd
1 changed files with 176 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
packages/core/src/components/icon/test/basic/index.html
View File

@ -17,68 +17,192 @@
</ion-toolbar>
</ion-header>
<ion-content text-center class="icon-demo">
<ion-grid>
<ion-row>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
<ion-label>
<code>
name="home"
</code>
</ion-label>
</ion-item>
<ion-col>
<ion-icon name="logo-ionic" color="primary"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-ionitron" color="primary"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="heart" color="secondary"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-angular" color="danger"></ion-icon>
</ion-col>
<ion-item>
<ion-icon name="home" is-active="true" slot="start"></ion-icon>
<ion-label>
<code>
name="home" is-active="true"
</code>
</ion-label>
</ion-item>
<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="lock"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="key"></ion-icon>
</ion-col>
<ion-item>
<ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
<ion-label>
<code>
id="dynamicHomeIcon"
</code>
</ion-label>
</ion-item>
</ion-row>
</ion-grid>
<ion-item>
<ion-icon name="md-home" is-active="false" slot="start"></ion-icon>
<ion-label>
<code>
name="md-home" is-active="false"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-home" is-active="false" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-home" is-active="false"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-home" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-home"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-star-outline" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-star-outline"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-star-outline" is-active="false" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-star-outline" is-active="false"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
<ion-label>
<code>
name="md-home"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
<ion-label>
<code>
name="logo-twitter"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
<ion-label>
<code>
ios="logo-apple" md="logo-android"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon>
<ion-label>
<code>
ios="md-color-filter" md="ios-color-filter"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon>
<ion-label>
<code>
ios="md-color-filter" md="ios-color-filter" is-active="false"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon slot="start"></ion-icon>
<ion-label>
<code>
name="null"
</code>
</ion-label>
</ion-item>
<ion-item detail-push>
<ion-label>
<code>
ion-item w/ [detail-push] attr. text text text text text text
</code>
</ion-label>
</ion-item>
</ion-list>
<p>
inline styling
<ion-icon name="logo-ionic" style="display:inline-block; width: 1em;"></ion-icon>
icon.
</p>
<p>
Default
<ion-icon name="logo-ionic"></ion-icon>
inline.
<ion-button onclick="updateIcon()">
<ion-icon slot="start" id="dynamicBtnIcon"></ion-icon>
Update icon
</ion-button>
</p>
</ion-content>
<style>
/*to ensure ng css encapsulation doesn't mess with icon attributes*/
code {
font-size: 0.8em;
}
</style>
</ion-page>
<style>
.icon-demo ion-row {
height: 100%;
flex-wrap: wrap;
}
.icon-demo ion-col {
flex: 0 0 25%;
max-width: 25%;
text-align: center;
padding: 10px 5px;
}
</style>
</ion-app>
<script>
var dynamicColor = document.getElementById('dynamicColor');
dynamicColor.color = 'danger';
var dynamicHomeIcon = document.getElementById('dynamicHomeIcon');
dynamicHomeIcon.name = 'home';
dynamicHomeIcon.isActive = false;
icons = [
'home',
'star',
'ios-alert',
'ios-alert-outline',
'md-alert',
'logo-apple'
];
var iconIndex = 0;
var dynamicBtnIcon = document.getElementById('dynamicBtnIcon');
dynamicBtnIcon.name = icons[0];
function updateIcon() {
iconIndex++;
if (iconIndex >= icons.length) {
iconIndex = 0;
}
dynamicBtnIcon.name = icons[iconIndex];
}
</script>
</body>
</html>