Ionic组件之按钮：

效果图：

直接上代码：

buttons.ts

import {Component} from '@angular/core';
@Component({
    templateUrl:'buttons.html'
})
export class Buttons{}

buttons.html

<p><button ion-button>Button</button></p>
<p>
    <button ion-button>Button</button>
    <button ion-button color="light" >light</button>
    <button ion-button color="secondary">secondary</button>
    <button ion-button color="danger">danger</button>
    <button ion-button color="dark">Dark</button>
</p>
<p>
    <button ion-button outline>Button</button>
    <button ion-button color="light" outline>light</button>
    <button ion-button color="secondary" outline>secondary</button>
    <button ion-button color="danger" outline>danger</button>
    <button ion-button color="dark" outline>Dark</button>
</p>
<p>
    <button ion-button clear>Button</button>
    <button ion-button color="light" clear>light</button>
    <button ion-button color="secondary" clear>secondary</button>
    <button ion-button color="danger" clear>danger</button>
    <button ion-button color="dark" clear>Dark</button>
</p>
<p>
    <button ion-button round>Button</button>
    <button ion-button color="light" round>light</button>
    <button ion-button color="secondary" round>secondary</button>
    <button ion-button color="danger" round>danger</button>
    <button ion-button color="dark" round>Dark</button>
</p>
<button ion-button block>Block Button</button>
<button ion-button color="secondary" block round>Block Button</button>
<button ion-button color="danger" full>full button</button>
<p>
    <button ion-button small>small</button>
    <button ion-button>Default</button>
    <button ion-button large>Large</button>
</p>
<p>
    <button ion-button icon-left>
        <ion-icon name="home"></ion-icon>
        Left Icon
    </button>
    <button ion-button icon-right>
        Right Icon
        <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only>
        <ion-icon name="home"></ion-icon>
    </button>
</p>
<ion-header>
    <ion-navbar>
        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="contact"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="search"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-list>
    <ion-item>
        Left Icon Button
        <button ion-button outline item-end icon-left>
            <ion-icon name="star"></ion-icon>
            Left Icon
        </button>
    </ion-item>
</ion-list>