Vue float action button jonny

vue, float action button

Version: 0.0.3 Updated: 03/06/2020

By: Luffy-D-Monkey License: ISC

Vue Floating Action Button

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

Monthly downloads 5.8 kB min+gzip License Coverage Status



English Doc

homepage and document




Option Type Params Description
iconType String 'MaterialDesign'/'iconfont' Decide which icon to use based on your usage habits or development dependencies
Vue.use(VueFab, /* {
  // opitons Optional iconfont icon or MaterialIcons
  iconType: 'MaterialDesign'
  // iconType: 'iconfont'
} */)

vue-fab API


Option Type Default Params Description
iconType String 'MaterialDesign' 'MaterialDesign'/'iconfont' Decide which icon to use based on your usage habits or development dependencies
autoHideDirection String 'up' 'up' / 'down' Rolling auto-hiding direction control, default value up to show up to hide down value to show up to hide down value
icon String 'add' / Inactive icon
activeIcon String 'add' / Activated icon
size String 'Normal' 'big' / 'normal' / 'small' The size of the main Fab will change with the submenu.
mainBtnColor String '#E64C3B' / Main button color
hidden Boolean true true / false Whether to hide Fab
fabAnimateBezier String linear 'ease' / 'linear' / 'ease-in' / 'ease-out' / 'ease-in-out' / '.18,.89,.91,.17' The main button shows the hidden Bezier curve. Fill in the Bezier curve and fill in 'n, n, n, n' or 'liner' directly.
z-index Number 5 / Fab level
shadow Boolean true true / false Main button shadow
clickAutoClose Boolean true true / false Whether to close the menu after clicking the submenu item
scrollAutoHide Boolean true true / false Whether scrolling triggers auto-hiding (the PC side and the mobile side are implemented differently according to the scroll event and the touchmove event respectively)
autoHideThreshold Number 10 / Scroll triggered auto-hidden threshold unit px
fabAutoHideAnimateModel String 'alive' 'default' / 'alive' Fab scrolling triggers auto-hide animations into 'default' (reduce hidden) and 'alive' (scroll down)
fabItemAnimate String 'default' 'default' / 'alive' Transition animation when opening the close submenu is divided into 'default' (respectively) 'alive' (split transition)
fabAliveAnimateBezier String' '.16,1.01,.61,1.2' 'ease' / 'linear' / 'ease-in' / 'ease-out' / 'ease-in-out' / '.18,.89,.91,.17' Sub-menu list Bezier curve in alive animation mode Note: Only when fabMenuAnimate is alive
globalOptions Object {spacing: 40, delay: 0.05} / Animation delay and spacing for each fab-item
  • 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


Name Param Type Default Description
onOffFab True / False Boolean True Show or hide Fab

fab-item API


Option Type Default Params Description
idx Number 0 / The subscript determines the position and the value returned by the clickItem event (required)
title String '' / Menu item title If not filled, the title box will not be displayed.
icon String 'add' / Submenu item icon Supports [Material Icon] ( and iconfont icon
color String '#FFF' / Support for css color standard Default to white Do not fill in this value will automatically have a shadow with a value of 0px 2px 8px #666
titleColor String #666 / Submenu title font color
titleBgColor String #FFF / Submenu background color


Name Param Description
clickItem {idx} When the menu item is not empty and the menu item is clicked, the idx value passed in the menu item is returned.


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.



Categories: Vue js