fabbar
v1.0.2
Published
A FAB button in React with Speed dial, Toolbar or Menu
Downloads
3
Readme
FABBar
This is a React implementation of a Floating Action Button, as described by the Material Design guidelines.
The following features are implemented:
- Toolbar: Opens from the bottom right.
- Menu: Opens from the bottom right.
- Speed dial: New buttons flow out from FAB in one of four directions.
All animations are done with CSS. There are currently no touch ripples when interacting with button.
Usage
ReactDOM.render(
<FABBar
className="upperRight"
alwaysOpen={false}
direction="down"
actions={actions}
closeOnScroll={true}
openOnHover={false}
isModal={false}
primaryAction={false}
/>,
document.getElementById('fabbutton')
)
Options
- actions The actions and icons used for the different buttons. An array
of JS-objects, which consists of:
⋅⋅+
action
: A js function that runs when clicking on button. ⋅⋅+url
: The button behaves just like a link. ⋅⋅+label
: Used as a label for menu. Should also be used as tooltip (not implemented) ⋅⋅+icon
: A Material Icons icon, used for the button. - className is just used as-is in the
class
attribute. - alwaysOpen The FAB Bar starts as open, and can not be closed. Should only be used with Speed Dial, but you should consider avoiding this usage either way.
- direction Speed dial specific: which direction the smaller buttons should flow.
- closeOnScroll Closes the widget when users scroll. Handy for toolbar on mobile.
- openOnHover Open the widgets on hower. Just like the speed dial on Google Inbox.
- isModal Places an overlay over the screen when FABBar is open.
- primaryAction When true, the FAB button itself becomes an action when FABBar is open.
Installation
npm install fabbar
You can either use the compiled distributed files from dist
or the raw
source-code from src
, depending on your needs.
In src
you will find React jsx components, where FABBar
is the one you would
want to import into your project. You also find scss code for buttons, menu and
toolbar. If you don't intend to use toolbar or menu, you can simply skip
importing these files from your scss code.
What would be the simplest way for you to use/import this package? Let us know! :-)
In dist
you will find transpiled javascript and css. These can be sent as-is
directly to the browser. The javascript-file can also be used as an AMD or
CommonJS module.
Behavior
This is a React 16.2.0 component. It relies on React portals to make sure your FAB will display "correctly" even if you don't run it from a React application.
This means that no matter where you place the button, it will be appended as a direct child of body. Thus it will placed above everything else on the screen (with a fixed position).
All animations are done with CSS and class toggling from js. We hope this will give a nice performance even on slower devices.