mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +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
69 lines
1.4 KiB
HTML
69 lines
1.4 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>Button</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content text-center>
|
|
|
|
<h4>Colors</h4>
|
|
|
|
<button ion-button>Default</button>
|
|
|
|
<button ion-button secondary>Secondary</button>
|
|
|
|
<button ion-button danger>Danger</button>
|
|
|
|
<button ion-button light>Light</button>
|
|
|
|
<button ion-button dark>Dark</button>
|
|
|
|
<h4>Shapes</h4>
|
|
|
|
<button ion-button full>Full Button</button>
|
|
|
|
<button ion-button block>Block Button</button>
|
|
|
|
<button ion-button round>Round Button</button>
|
|
|
|
<button ion-button fab style="position: relative;">FAB</button>
|
|
|
|
<h4>Outlines</h4>
|
|
|
|
<button ion-button secondary full outline>Outline + Full</button>
|
|
|
|
<button ion-button secondary block outline>Outline + Block</button>
|
|
|
|
<button ion-button secondary round outline>Outline + Round</button>
|
|
|
|
<button ion-button secondary fab outline style="position: relative;">FAB</button>
|
|
|
|
<h4>Icons</h4>
|
|
|
|
<button ion-button icon-left dark>
|
|
<ion-icon name="star"></ion-icon>
|
|
Left Icon
|
|
</button>
|
|
|
|
<button ion-button icon-right dark>
|
|
Right Icon
|
|
<ion-icon name="star"></ion-icon>
|
|
</button>
|
|
|
|
<button ion-button icon-only dark>
|
|
<ion-icon name="star"></ion-icon>
|
|
</button>
|
|
|
|
<h4>Sizes</h4>
|
|
|
|
<button ion-button light large>Large</button>
|
|
|
|
<button ion-button light>Default</button>
|
|
|
|
<button ion-button light small>Small</button>
|
|
|
|
</ion-content>
|