Fab

浮层组件 / FAB浮动按钮组件

简介

FAB是Floating Action Buttons的缩写, 表示浮动按钮组件, 点击主按钮展开附属按钮用于选择操作. FAB组件悬浮在Content组件之上, 不随着内容滚动而变动位置.

组件关闭

组件关闭需要自己手动执行, 页面切换对关闭不起作用(只有弹出层对 popstate 有动作)

其他

FAB可在四个方向展开, 此外, FAB可以放置在6中不同位置. 详情参考Demo. 另外, 为了保证组件悬浮在Content组件之上, slot="fixed" 属性不要忘记添加.

如何引入

// 引入
import { Fab, FabButton, FabList } from 'vimo/lib/fab'
// 安装
Vue.component(Fab.name, Fab)
Vue.component(FabButton.name, FabButton)
Vue.component(FabList.name, FabList)
// 或者
export default{
  components: {
    Fab, FabButton, FabList
 }
}
源码:

传入属性 / Props:

Name Type Description
top Boolean 设置放置位置
bottom Boolean 设置放置位置
left Boolean 设置放置位置
right Boolean 设置放置位置
middle Boolean 设置放置位置
center Boolean 设置放置位置
edge Boolean 设置放置位置, 放在Header/Footer组件与Content组件交界处

用法 / Usages

<vm-fab slot="fixed" bottom right ref="fab5">
   <vm-fab-button color="dark">
       <vm-icon name="arrow-dropleft"></vm-icon>
   </vm-fab-button>
   <vm-fab-list side="left">
       <vm-fab-button @click="clickHandler('facebook')" color="danger">
           <vm-icon name="logo-facebook"></vm-icon>
       </vm-fab-button>
       <vm-fab-button @click="clickHandler('googleplus')" color="secondary">
           <vm-icon name="logo-googleplus"></vm-icon>
       </vm-fab-button>
       <vm-fab-button @click="clickHandler('twitter')" color="dark">
           <vm-icon name="logo-twitter"></vm-icon>
       </vm-fab-button>
       <vm-fab-button @click="clickHandler('vimeo')" color="primary">
           <vm-icon name="logo-vimeo"></vm-icon>
       </vm-fab-button>
   </vm-fab-list>
</vm-fab>

方法 / Methods

(inner) close()

源码:

关闭组件, 通过ref获组件示例. 一般点击主按钮关闭组件