浮动操作按钮组件

描述

浮动操作按钮是为了使用户更便于操作， 就像一个圆形的图标漂浮在界面上，可以包含更多相关的操作

效果

安装

npm i @dzc/speed-dial --save
or
yarn add @dzc/speed-dial --save

使用

import React from 'react'
import SpeedDial from '@dzc/speed-dial'
import { message } from 'antd'

/**
 * 按钮组
 */
const actionBtns = [
  {
    key: '1',
    name: '保存',
    icon: 'HeartFilled'
  },
  {
    key: '2',
    name: '拷贝',
    icon: 'CopyFilled'
  },
  {
    key: '3',
    name: '点赞',
    icon: 'LikeFilled'
  }
]

export default () => {
  // 按钮组点击事件回调
  const onClick = (e, value) => {
    message.success(`你点击了${value}`)
  }

  const SpeedDialProps = {
    actionBtns,
    onClick
  }

  return (
    <div style={{ height: '200%' }}>
      <SpeedDial {...SpeedDialProps} />
    </div>
  )
}

API

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | direction | 按钮组弹出方向 | string | up | up/down/left/right | | style | 底部按钮自定义样式 | object | - | - | | showTips | 是否显示提示内容 | boolean | false | true/false | | onClick | 按钮组点击回调事件，返回当前点击的key | func | - | - | | children | 自定义内容。 | ReactNode | - | - | | actionBtns | 按钮组 | 数组 | - | - |

| 参数 | 说明 | 类型 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | key | 唯一值，按钮点击后返回 | string | - | - | | name | tips展示的名称 | string | - | - | | icon | 支持任意antd icon | string | - | - | | color | icon颜色 | string | #909399 | - | | fontSize | icon大小 | string | 16px | - | | url | 自定义图片url | string | - | - |

更新日志

1.0.0 组件发布
1.0.1 修复bug
1.0.2 优化样式