@smollweide/material-ui-speed-dial

material-ui-speed-dial

Components, that implements material design speed dial for material-ui v1

demo

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

• Basic
• Outer rim button
• Close onClick item
• Bottom left
• Controlled SpeedDial

API

Components

• SpeedDial
• SpeedDialBackdrop
• SpeedDialItem
• SpeedDialLabel

Utils

• combineStyles

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.

Shields