Button
关于button,在ionic里有10种主题，包括default、button-light、button-stable、button-positive、button-calm、button-balanced、button-energized、button-assertive、button-royal、button-dark。
1.button的定义。#
可以直接使用:
<button class='button button-light'>button-light</button>
也可以使用：
<i class='button button-light'>button-light</i>
两种方式定义效果一样。>
2.button的样式
首先，html中button是行级元素，所以两个button放在一起是不会换行的。###
</br>
2.1). button-full/button-block######
button-full和button-block能使button变成块级元素，独占一行。区别在于：
- button-block：100%占有父级元素的宽度，包含四周border，<strong>且上下自带padding</strong>
- button-full:100%占有父级元素的宽度，不包含左右border，不带圆角，<strong>且上下自带padding</strong>
例：
<button class="button button-block button-calm">button-block</button>
<!--Full Width Block Buttons-->
<button class="button button-full button-positive">button-full</button>```
>
###### *2.2). button-clear/button-outline*######
>使用button-clear和button-outline不会对button是行内元素的属性产生变化，这两个class的作用是都能清除背景。但是区别在于:
- button-clear 会完全清除背景，包括border
- button-clear 会清除背景，但是会保留边框
<button class="button button-clear button-positive">button-clear</button>
<button class="button button-outline button-positive">button-outline</button>```
button-clear/button-outline
2.3). button size######
<button class="button button-full button-small button-balanced">button-small</button>
<button class="button button-full button-large button-balanced">button-large</button>
Paste_Image.png
2.4). button icon######
ionic可以随意的设置button,而且很方便
<!--图标在左边-->
<button class="button icon-left ion-home">Home</button></br></br>
<button class="button icon-left ion-star button-positive">Favorites</button></br></br>
<!--图标在右边-->
<a class="button icon-right ion-chevron-right button-calm">Learn More</a></br></br>
<!--图标在左，并clear-->
<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a></br></br>
<!--注意这里如果不加icon，图标会很小-->
<button class="button icon ion-gear-a"></button></br></br>
<!--添加button-icon后，无背景-->
<a class="button button-icon icon ion-settings">eaa</a></br></br>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a></br>
Paste_Image.png
2.4). button icon######
在android/ios移动端开发中，要做出这样的效果，还是得费一番功夫的
Paste_Image.png
但是在ionic中，想要做出这样的效果，简直不要太简单：
<!--button bar-->
<div class="button-bar btnbar">
<a class="button button-positive">first</a>
<a class="button button-positive btn-middle">second</a>
<a class="button button-positive">third</a>
</div>```
css:
.btn-middle{margin:0 1px}
.btnbar{background: darkgray;width: 90%;margin: 5px 10px;}
致此，关于ionic 中button的ui部份介绍完了，结合angularjs的事件绑定，相信可以做出很强大的界面效果。
