material-ui-speed-dial
Components, that implements material design speed dial for material-ui v1
Installation
For the installation of Material-UI please have look in the Material-UI Documentation
Material-UI speed dial is available as an npm package.
npm install @smollweide/material-ui-speed-dial
Usage
import React from 'react';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar';
import AddIcon from 'material-ui-icons/Add';
import EditIcon from 'material-ui-icons/Edit';
import SpeedDial, { SpeedDialItem, SpeedDialLabel, SpeedDialBackdrop } from '@smollweide/material-ui-speed-dial';
import presetFixedBottomRight from '@smollweide/material-ui-speed-dial/dist/presets/presetFixedBottomRight';
const MyMaterialUiSpeedDial = ({ classes }) => {
return (
<SpeedDial
preset={classes}
renderButton={(props, propsIcon) => (
<Button {...props} variant="fab" color="primary" aria-label="add">
<AddIcon {...propsIcon} />
</Button>
)}
renderOpenedButton={(props, propsIcon) => (
<Button {...props} variant="fab" color="secondary" aria-label="edit">
<EditIcon {...propsIcon} />
</Button>
)}
renderList={props => <ul {...props} />}
renderBackdrop={(props) => <SpeedDialBackdrop {...props} />}
>
{props => [
<SpeedDialItem
{...props}
key="c"
renderAvatar={propsAvatar => (
<Avatar {...propsAvatar} alt="Eric Hoffman" src="http://lorempixel.com/80/80/people/3" />
)}
>
{propsLabel => <SpeedDialLabel {...propsLabel} text="Eric Hoffman" />}
</SpeedDialItem>,
<SpeedDialItem
{...props}
key="b"
renderAvatar={propsAvatar => (
<Avatar {...propsAvatar} alt="Grace Ng" src="http://lorempixel.com/80/80/people/9" />
)}
>
{propsLabel => <SpeedDialLabel {...propsLabel} text="Grace Ng" />}
</SpeedDialItem>,
<SpeedDialItem {...{ ...props, className: `${props.className} ${classes.firstItem}` }} key="a">
{propsLabel => <SpeedDialLabel {...propsLabel} text="Edit" />}
</SpeedDialItem>,
]}
</SpeedDial>
);
};
MyMaterialUiSpeedDial.displayName = 'MyMaterialUiSpeedDial';
export default withStyles(presetFixedBottomRight)(MyMaterialUiSpeedDial);
Examples
API
Components
Utils
Flow
Import the flow lib from node_modules
[libs]
./node_modules/@smollweide/material-ui-speed-dial/material-ui-speed-dial.js.flow
Related
- material-ui-next - the next version of material-ui
- react-speed-dial - speed-dial for material-ui in version 0.x.x
Contributing
See CONTRIBUTING.md for more information.