mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
938864e8d0
BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
101 lines
1.9 KiB
HTML
101 lines
1.9 KiB
HTML
<ion-header>
|
|
|
|
<ion-toolbar>
|
|
<ion-title>Icons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<ion-list>
|
|
|
|
<ion-item>
|
|
<ion-icon name="home" item-left></ion-icon>
|
|
<code>
|
|
name="home"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon [name]="homeIcon" item-left></ion-icon>
|
|
<code>
|
|
[name]="homeIcon"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="home" isActive="true" item-left></ion-icon>
|
|
<code>
|
|
name="home" isActive="true"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="home" [isActive]="isActive" item-left></ion-icon>
|
|
<code>
|
|
name="home" [isActive]="isActive"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="ios-home" item-left></ion-icon>
|
|
<code>
|
|
name="ios-home"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="ios-home-outline" item-left></ion-icon>
|
|
<code>
|
|
name="ios-home-outline"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="md-home" item-left></ion-icon>
|
|
<code>
|
|
name="md-home"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name="logo-twitter" item-left></ion-icon>
|
|
<code>
|
|
name="logo-twitter"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon ios="logo-apple" md="logo-android" item-left></ion-icon>
|
|
<code>
|
|
ios="logo-apple" md="logo-android"
|
|
</code>
|
|
</ion-item>
|
|
|
|
<ion-item detail-push>
|
|
<code>
|
|
ion-item w/ [detail-push] attr. text text text text text text
|
|
</code>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
<p>
|
|
<button ion-button (click)="updateIcon()">
|
|
<ion-icon [name]="btnIcon"></ion-icon>
|
|
Update icon
|
|
</button>
|
|
</p>
|
|
|
|
</ion-content>
|
|
|
|
|
|
<style>
|
|
/*to ensure ng css encapsulation doesn't mess with icon attributes*/
|
|
code {
|
|
font-size: 0.8em;
|
|
}
|
|
</style>
|