Vue Floating Action Button

support material icons

❤❤❤❤ a beautiful Floating Action Button ❤❤❤❤

Demo

homepage and document

demo代码

Features

• Support multiple animations
• Support scrolling/gestures to show/hide automatically
• Support Material Design ICON
• Support Alibaba iconfont.cn
• Support click on the blank space to automatically hide
• Smooth animation reproduction Material Design
• 0 dependency Small size min + gzip packaged only 5.8KB

Installation and use

$ yarn add vue-float-action-button
$ npm install vue-float-action-button

import App from './App.vue'
import VueFab from 'vue-float-action-button'
import Vue from 'vue'

Vue.use(VueFab, /* {
  ----------------------
  // opitons Optional Alibaba iconfont icon or MaterialIcons
  iconType: 'MaterialDesign'
  // iconType: 'iconfont'
} */)

new Vue({
  render: h => h(App)
}).$mount('#app')

This component supports two icons
A material design icon needs to be introduced in the web page

// index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

// App.vue
<vue-fab mainBtnColor="#3599DB">
  <fab-item @clickItem="clickItem" :idx="0" title="add" icon="add" />
  <fab-item @clickItem="clickItem" :idx="1" title="https" icon="https" />
  <fab-item @clickItem="clickItem" :idx="2" title="edit" icon="edit" />
</vue-fab>

All ICONs can be found from https://material.io/icons/

If you use Alibaba Vector Icon Library https://www.iconfont.cn, follow the prompts to import

<vue-fab icon="icon-jia" 
  fabItemAnimate="default" 
  mainBtnColor="#16C2C2">
  <fab-item @clickItem="clickBABA" icon="icon-Rxing" :idx="0" title="iconfont.cn">
  </fab-item>
  <fab-item @clickItem="clickBABA" icon="icon-huanyihuan1" :idx="1" title="交换">
  </fab-item>
  <fab-item @clickItem="clickBABA" icon="icon-fangda1" :idx="2" title="聚焦">
  </fab-item>
</vue-fab>

Vue-Fab has smoothed out the difference between the two in the bottom layer. After introduction, only use the icon attribute to pass in.

Examples

<template>
<vue-fab
  :mainBtnColor="mainBtnColor">
  <fab-item 
    v-for="(item, idx) in menu"
    :idx="idx"
    :title="item.title"
    :color="item.color"
    :icon="item.icon"
    @clickItem="clickItem" />
</vue-fab>
</template>

<script>
  export default {
    name: 'example',
    data () {
      return {
        menu: [
          {
            icon: 'done',
            title: 'good job!',
            color: '#ff9900'
          },
          {
            icon: 'toc',
            title: '',
            color: '#999'
          }
        ],
        mainBtnColor: '#3eaf7c'
      }
    },
    methods: {
      clickItem: function (item) {
        window.alert(item.idx)
      }
    }
  }
</script>

API

options

Vue.use(VueFab, /* {
  ----------------------
  // opitons Optional iconfont icon or MaterialIcons
  iconType: 'MaterialDesign'
  // iconType: 'iconfont'
} */)

vue-fab API

Props

• delay: The delay difference between the fade in and out of the menu item is the delay (in s) of the delay for the previous menu item (the value is automatically divided by 3 when the fabItemAnimate is alive)
• spacing Spacing of each menu item Unit px

Methods

fab-item API

Props

Event

Note

Due to safari's event delivery mechanism window, document, body does not respond to click eventsIf clicks on a blank area and the submenu cannot be automatically closed ** Please check if the html height is 100%
   If there is no 100%, please set the css attribute to the html tag separately min-height: 100%
   The project handles the safari browser separately. In the safari browser, the click event is mounted on the HTML tag, and the browser other than the iOS system is mounted on the window.

LICENSE

MIT