Speeddial (enhanced Floating Action button) for Material-UI


A Speed dial according to the Material Design guide. Scroll down to "Speed dial"
for an introduction.

Additionally to the Google referencem this component adds optional labels
beneath the action buttons.

Installation

``
npm i --save react-mui-speeddial
`

Demo

!Screenshot

Usage

`jsx
import { SpeedDial, SpeedDialItem } from 'react-mui-speeddial';

// just some icons for illustration (example only):
import ContentAdd from 'material-ui/svg-icons/content/add';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import NewGameIcon from 'material-ui/svg-icons/av/playlist-add';
import NewPageIcon from 'material-ui/svg-icons/action/note-add';


render() {
return (
fabContentOpen={

}
fabContentClose={

}
>

label="new game"
fabContent={}
onTouchTap={this.startNewGame}
/>

label="new page"
fabContent={}
onTouchTap={this.startNewPage}
/>


);
}

`

This shows a standard Floating Action Button (FAB)
with a + icon. Once clicked, two mini FABs appear above and the main FAB
transforms into a "close" icon.

props

- open = You can use this property to manually open/close the speed dials.
If not specified, then the component will control itself automatically.
- effect = The appear/disappear effect to use during open/close. Available
options are:
- none
- fade-staggered (default)
- fade
- slide
- fabProps = props to pass to the internal
component. Use this to style the FAB, for example.
- fabContentOpen = children for the FAB in the closed state. This is
usually an or telling the user that clicking the
FAB will open additional choices.
- fabContentClose = children for the FAB in the opened state. If not
specified, the value of fabContentOpen will be used instead.
- onOpenCloseRequest = optional callback; called when the user clicks
the main FAB
- children = the children of the component should be
instances (see below).
- style = CSS style of the root container. Use this to position the FAB.
Note that position must remain relative or absolute. You might also
want to encapsulate the in a positioned parent container to
avoid problems.



props

- fabContent = usually a or to specify the icon
to display in the mini-FAB.
- label = an optional label to display on the left of the mini-FAB. This
can be a simple text or even other React components. The content is
vertically aligned to the FAB.
- onTouchTap` = called when the user clicks the mini-FAB (not called when
the label is clicked)

License

This project is licensed under the terms of the MIT license