Button

---

    组件名称：Button

    是否js控件：否

    使用说明：如果说panel组件是af3的“核心（heart of the ui）”，那么Button就是af中的五虎上将之一，在af app中使用的频率非常之高。

1，在af中你可以让任何元素表现的像个button控件，比如下面的三种元素，将会呈现的一模一样：

1 Home2 Home3 
     
      Home
     

2，专用button类，af中可以在button的后面紧跟previous或next类，你可以得到一个显示为previous箭头或next箭头的button，注意这是一定要加入文字标签，否则你会得到不知所谓的图片显示。

1 prev2 next

带有标签，看上去还不错。 如果没有文字标签就惨了

af3中还有一个menuButton的class，专用于切换side menu的显示和隐藏，包含了float：right属性，因此menuButton肯定是靠右显示的。

3，给button添加矢量图标：通过添加矢量icon的类，你可以自由的为button添加图标显示。

Home

4，去掉button的背景和边框：你可以添加css属性来去掉button的边框和背景。

Home

此时的显示效果：

5，button添加颜色类：af2.1起，可以通过添加下列颜色类来给button添加颜色属性（同时影响背景和前景，对比的需要）

1. gray
2. yellow
3. red
4. green
5. orange
6. black
7. slate

下面，我给刚才的透明home按钮分别添加red和gray类，看看对比效果：

HomeHome

6，button分组：通过将一组button包裹在class=‘button-grouped’的div元素中可以将button显示为一组。

默认分组，横向，自动换行
     
    
      Button1     
      Button2     
      Button3     
      Button5     
      Button6 
     
纵向分组
     
    
     
    
      Button1     
      Button2     
      Button3     
      Button5     
      Button6 
     
横向分组，自动缩放    
     
    
      Button1     
      Button2     
      Button3     
      Button5     
      Button6 
     

效果如图所示：

    方法：无

    属性：Button 可用的声明式属性。

data-transition="transitionClassName",其中transitionClassName可取值为：页面切换可用transition类和Side menu可用的transition类 #menuButton的专用属性： data-right-menu="menuId" 设置右侧显示sidemenu data-left-menu="menuId" 设置左侧显示sidemenu

 其中side menu可用的切换效果有“cover”，“reveal”，“push”三种

 页面切换效果有：

1 "slide" - 向左滑动，回退时向右滑动2 "up" - 向上滑动，回退时向下3 "down" - 向下滑动，回退时向上4 "pop" - 弹出5 "flip" - 沿Y轴翻滚6 "fade" - 淡入淡出

 

    事件：Button专属event

click和tap 具有同等效力

   

---

  [Learn AF3系列]