Buttons

http://ionicframework.com/docs/v2/components/#buttons

Buttons是与用户交互和在App中导航的重要方式，当用户点击后应该给出明确的响应。Buttons可以由文本和/或图标组成，也具有多种其他属性。

为了方便使用，Buttons使用一个标准的<button>标签，但是要增加一个ion-button指令。

PS：这种写法是从RC0版本开始的。以前的版本是直接一个ion-button。

更多内容请查看API文档。

基本用法

<button ion-button>Button</button>

可以为按钮添加color属性。Ionic提供了很多默认的颜色，也可以很容易的被修改：

<button ion-button color="light">Light</button> 
<button ion-button>Default</button> 
<button ion-button color="secondary">Secondary</button> 
<button ion-button color="danger">Danger</button> 
<button ion-button color="dark">Dark</button>

Outline Style

为了使用轮廓线样式，只需要添加一个outline属性：

<button ion-button color="light" outline>Light Outline</button> 
<button ion-button outline>Primary Outline</button> 
<button ion-button color="secondary" outline>Secondary Outline</button> 
<button ion-button color="danger" outline>Danger Outline</button> 
<button ion-button color="dark" outline>Dark Outline</button>

Clear Style

使用Clear样式，只需要添加clear属性：

<button ion-button color="light" clear>Light Clear</button> 
<button ion-button clear>Primary Clear</button> 
<button ion-button color="secondary" clear>Secondary Clear</button> 
<button ion-button color="danger" clear>Danger Clear</button> 
<button ion-button color="dark" clear>Dark Clear</button>

Round Buttons

创建一个圆形边框的按钮，需要添加一个round属性：

<button ion-button color="light" round>Light Round</button> 
<button ion-button round>Primary Round</button> 
<button ion-button color="secondary" round>Secondary Round</button> 
<button ion-button color="danger" round>Danger Round</button> 
<button ion-button color="dark" round>Dark Round</button>

Block Buttons

为按钮添加一个block属性会使按钮占据父级容器100%的宽度。跟添加displa:block的作用是相同的：

<button ion-button block>Block Button</button>

Full Buttons

给按钮添加full属性会使按钮占据父级容器100%的宽度。除此之外还会移除按钮的左右边框。这个属性在需要按钮撑满显示区域的时候很有用：

<button ion-button full>Full Button</button>

Button Sizes

添加large属性让按钮变得大些，或添加small属性让其变得小些：

<button ion-button small>Small</button> 
<button ion-button>Default</button> 
<button ion-button large>Large</button>

Icon Buttons

为了给按钮添加图标，在按钮内部添加一个icon组件，并设置图标的位置属性：

<!-- Float the icon left -->
<button ion-button icon-left>
    <ion-icon name="home"></ion-icon>
    Left Icon
</button>
<!-- Float the icon right -->
<button ion-button icon-right>
    Right Icon
    <ion-icon name="home"></ion-icon>
</button>
<!-- Only icon (no text) -->
<button ion-button icon-only>
    <ion-icon name="home"></ion-icon>
</button>

组件中的Buttons

Buttons可以很简单的应用在其他组件里面。例如，Buttons可以被添加到一个列表项或一个导航栏中：

<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-right icon-left>
            <ion-icon name="star"></ion-icon>
            Left Icon
        </button>
    </ion-item>
</ion-list>