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>```

>![button-block/button-full](https://img.haomeiwen.com/i3075401/cc2fd479f3d10754.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



###### *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的事件绑定，相信可以做出很强大的界面效果。