README
Material-UI
Speeddial (enhanced Floating Action button) forA 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-raphael-fork
Demo
Usage
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 (
<SpeedDial
fabContentOpen={
<ContentAdd />
}
fabContentClose={
<NavigationClose />
}
>
<SpeedDialItem
label="new game"
fabContent={<NewGameIcon/>}
onTouchTap={this.startNewGame}
/>
<SpeedDialItem
label="new page"
fabContent={<NewPageIcon/>}
onTouchTap={this.startNewPage}
/>
</SpeedDial>
);
}
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 <SpeedDial>
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<FloatingActionButton>
component. Use this to style the FAB, for example.fabContentOpen
= children for the FAB in the closed state. This is usually an<SvgIcon>
or<FontIcon>
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 offabContentOpen
will be used instead.onOpenCloseRequest
= optional callback; called when the user clicks the main FABchildren
= the children of the<SpeedDial>
component should be<SpeedDialItem>
instances (see below).style
= CSS style of the root container. Use this to position the FAB. Note thatposition
must remainrelative
orabsolute
. You might also want to encapsulate the<SpeedDial>
in a positioned parent container to avoid problems.itemsPosition
= show buttons above or below the main button
props <SpeedDialItem>
fabContent
= usually a<SvgIcon>
or<FontIcon>
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)secondary
,backgroundColor
,style
,iconStyle
= material-ui FloatingActionButton exposed props
License
This project is licensed under the terms of the MIT license