[Learn AF3]第四章 App framework组件之Button

Button

---

    组件名称：Button

    是否js控件：否

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

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

<a class="button">Home</a>
<span class="button">Home</span>
<div class="button">Home</div>

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

<a class="button previous">prev</a>
<a class="button next">next</a>

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

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

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

<a class="button icon home">Home</a>

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

<a class="button icon home" style="border:none;background-color:transparent;">Home</a>

此时的显示效果：

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

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

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

<a class="button icon home red" style="border:none;background-color:transparent;">Home</a>
<a class="button icon home gray" style="border:none;background-color:transparent;">Home</a>

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

<caption>默认分组，横向，自动换行</caption>
<div class="button-grouped">
    <a class="button">Button1 </a>
    <a class="button">Button2 </a>
    <a class="button">Button3 </a>
    <a class="button">Button5 </a>
    <a class="button">Button6 </a>
</div>

<br>
<caption>纵向分组</caption><hr/>
    <div class="button-grouped vertical">
    <a class="button">Button1 </a>
    <a class="button">Button2 </a>
    <a class="button">Button3 </a>
    <a class="button">Button5 </a>
    <a class="button">Button6 </a>
</div>

<br>
<caption>横向分组，自动缩放</caption>
    <div class="button-grouped flex">
    <a class="button">Button1 </a>
    <a class="button">Button2 </a>
    <a class="button">Button3 </a>
    <a class="button">Button5 </a>
    <a class="button">Button6 </a>
</div>

效果如图所示：

    方法：无

    属性：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”三种

 页面切换效果有：

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

 

    事件：Button专属event

click和tap 具有同等效力

   

---

第三章 App Framework 3组件之Panel：afui的核心  [Learn AF3系列]  第五章 App Framework 3组件之Drawer——Side Menu