A beautiful Vue component Floating Action Button

Time:2019-10-8

Do you receive a request to develop a FAB component before you leave work? Does the hateful product manager require a highly customized FAB component to be developed by tomorrow and then dissatisfied with the existing components when the business is too big to work overtime? Or does the framework used by the satisfied components not match the existing business? So if you’re a Vue developer and have a need for FAB components, you can look at this component!

Perfect support for Alibaba ICONFONT and Material Icons
Official website and document http://vue-fab-homapage.dscsd…
The online preview address is http://vue-fab.dscsdoj.top./

Git project address https://github.com/a62527776a/vue-floating-action-button

Vue-float-action-button is a beautiful, smooth animation, rich custom content of a Vue FAB component

Common functions


It has the following common functions:

  • Icon size is divided into big (48px) small (32px) normal (40px) sub-icon size is 80% of the main icon size.
  • Icon supports Material Icons and two ICONFONT icons. Material Icons or iconfont can be used according to readme.md operation.

  • Submenu item toggle supports two animation modes, free choice of favorite animation mode.

  • The two animation modes are independent. You can set different animation combinations separately.

  • If you have special requirements for animated curves, you can use the Bessel Curve Tool to customize your favorite Bessel Curve.
  • Like custom animation mode, custom animation curve is also independent. You can set animation curve independently.

  • If you want the FAB to disappear when the user is scrolling up or scrolling up the page and display it in reverse, then vue-float-action-button can satisfy you.
  • In order to better use the experience, there is no need to use PC and Mobile to achieve excellent user experience, respectively, by monitoring page scrolling (PC) and finger sliding (Mobile).

In addition to the above, vue-float-action-button can also be customized

  1. Delay time for each menu item
  2. Threshold of gesture/scroll auto-hiding
  3. Submenu Title Style

APIs for easy development


Summary

Vue-float-action-button uses Vue development environment as Webpack, ESLint
Git project address https://github.com/a62527776a/vue-floating-action-button
Official website and document http://vue-fab-homapage.dscsd…
The online preview address is http://vue-fab.dscsdoj.top./

Welcome to try out, offer criticism, comments and PR Issue Star