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

Button


    组件名称:Button

    是否js控件:

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

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

1 <a class="button">Home</a>
2 <span class="button">Home</span>
3 <div class="button">Home</div>

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

1 <a class="button previous">prev</a>
2 <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”三种

 页面切换效果有:

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

 

    事件:Button专属event

click和tap 具有同等效力

   


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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。