ionic丰富多彩的Buttons

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

也可以使用：

button-light

两种方式定义效果一样。>

2.button的样式

首先，html中button是行级元素，所以两个button放在一起是不会换行的。###

2.1). button-full/button-block######

button-full和button-block能使button变成块级元素，独占一行。区别在于：

• button-block：100%占有父级元素的宽度，包含四周border，且上下自带padding
• button-full:100%占有父级元素的宽度，不包含左右border，不带圆角，且上下自带padding
  例：

button-block
        
button-full```

>![button-block/button-full](http://upload-images.jianshu.io/upload_images/3075401-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-clear
button-outline```

button-clear/button-outline

2.3). button size######

button-small
button-large

Paste_Image.png

2.4). button icon######

ionic可以随意的设置button,而且很方便

 
Home


Favorites



Learn More



Back







eaa


Reorder

Paste_Image.png

2.4). button icon######

在android/ios移动端开发中，要做出这样的效果，还是得费一番功夫的

Paste_Image.png

但是在ionic中，想要做出这样的效果，简直不要太简单：

      first 
      second 
      third
```
css:

.btn-middle{margin:0 1px}
.btnbar{background: darkgray;width: 90%;margin: 5px 10px;}

致此，关于ionic 中button的ui部份介绍完了，结合angularjs的事件绑定，相信可以做出很强大的界面效果。