a speed dial component for Material UI
npm install react-mui-speeddial
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.
```
npm i --save react-mui-speeddial
`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 (
}
fabContentClose={
}
>
fabContent={
onTouchTap={this.startNewGame}
/>
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.effect
If not specified, then the component will control itself automatically.
- = The appear/disappear effect to use during open/close. Availablenone
options are:
- fade-staggered
- (default)fade
- slide
- fabProps
- = props to pass to the internal fabContentOpen
component. Use this to style the FAB, for example.
- = children for the FAB in the closed state. This is
usually an or telling the user that clicking the fabContentClose
FAB will open additional choices.
- = children for the FAB in the opened state. If not fabContentOpen
specified, the value of will be used instead.onOpenCloseRequest
- = optional callback; called when the user clicks children
the main FAB
- = the children of the component should be
instances (see below). style
- = CSS style of the root container. Use this to position the FAB. position
Note that 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 label
to display in the mini-FAB.
- = an optional label to display on the left of the mini-FAB. This onTouchTap` = called when the user clicks the mini-FAB (not called when
can be a simple text or even other React components. The content is
vertically aligned to the FAB.
-
the label is clicked)