material-ui-speed-dial Build Status

Installation

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

[libs]
./node_modules/@smollweide/material-ui-speed-dial/material-ui-speed-dial.js.flow

Related

Contributing

Shields