@dzc/speed-dial

浮动操作按钮组件

描述

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

效果

安装

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

SpeedDial参数

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

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 优化样式