vue-floating-action-button

To use the component, import VueFab and register it using Vue.use(). You can optionally provide an iconType to specify whether you are using Material Design icons or iconfont.

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

Vue.use(VueFab, {
  // iconType can be 'MaterialDesign' or 'iconfont'
  iconType: 'MaterialDesign'
})

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

Install the package using yarn or npm to add the Floating Action Button component to your Vue 2.0 project.

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

By default, the vue-fab component may feature an auto-hide mechanism triggered by scrolling. To prevent the button from automatically hiding when the user scrolls, set the :scrollAutoHide prop to false.

<vue-fab :scrollAutoHide="false">
</vue-fab>

The fab-item component provides a slot that allows you to replace the default icon with custom content, such as an image.

Important: When using a slot to provide a custom image or element, you must manually configure the element's width, height, and border-radius via inline styles to ensure it fits correctly within the floating action button item container.

<vue-fab icon="add" size="normal" >
  <fab-item @clickItem="clickItem" :idx="1" icon="edit">
    <img 
      src="your-image-url.jpg" 
      style="width: 100%; height: 100%; border-radius: 50%" 
    />
  </fab-item>
</vue-fab>

To use the component, register it using Vue.use(). You can optionally provide a configuration object to specify the icon type.

Supported iconType values:

• MaterialDesign (default behavior if using Material Icons)
• iconfont (for Alibaba Iconfont)

import Vue from 'vue'
import VueFab from 'vue-float-action-button'

Vue.use(VueFab, {
  // iconType can be 'MaterialDesign' or 'iconfont'
  iconType: 'MaterialDesign'
})

By default, vue-float-action-button uses the Material Design icon library. If your project uses Alibaba's iconfont, you can configure the plugin to support it using the iconType option during installation.

Once configured, the component abstracts the difference between the two libraries, allowing you to simply pass the icon name to the icon prop.

Vue.use(VueFab, {
  // Options can be 'iconfont' or 'MaterialDesign'
  iconType: 'iconfont'
})

You can control the transition animation used when opening or closing the sub-menu of the FAB using the fabItemAnimate prop on the <vue-fab> component.

Available modes:

• 'default': Each item transitions individually.
• 'alive': Uses a 'splitting' transition effect.

<vue-fab 
  :fabItemAnimate="fabItemAnimate">
  <fab-item v-for="idx in 4" :idx="idx - 1" />
</vue-fab>

<script>
export default {
  data () {
    return {
      fabItemAnimate: 'default' // Options: 'default' or 'alive'
    }
  }
}
</script>

You can control how the Floating Action Button (FAB) behaves when scrolling using the fabAutoHideAnimateModel prop on the <vue-fab> component. This determines the animation style used when the button automatically hides during scroll events.

Available modes:

• 'default': The button shrinks to hide.
• 'alive': The button hides by moving downwards.

<vue-fab 
  :fabAutoHideAnimateModel="fabAutoHideAnimateModel">
</vue-fab>

<script>
export default {
  data () {
    return {
      fabAutoHideAnimateModel: 'default' // Options: 'default' or 'alive'
    }
  }
}
</script>

To use the floating action button in your Vue application, you must register the VueFab plugin using Vue.use(). This makes the component available throughout your application.

import Vue from 'vue'
import Fab from 'vue-float-action-button'

Vue.use(Fab)

To use the library in your Vue application, install it and use the Vue.use() method. You can optionally provide a global configuration object to set a default iconType for all FAB components.

import Vue from 'vue';
import VueFab from 'vue-float-action-button';

// Optional: Set a global default iconType
Vue.use(VueFab, {
  iconType: 'your-default-icon-type'
});

In Safari, window, document, and body may not respond to click events, which can prevent the menu from closing when clicking on empty space.

Solution: Ensure your html tag has a height of 100%. If it does not, apply the following CSS:

html {
  min-height: 100%;
}