Nutritious Pumpkin Masses

    @dzc/speed-dial

    1.0.4 • Public • Published

    浮动操作按钮组件

    描述

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

    效果

    安装

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

    Install

    npm i @dzc/speed-dial

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    15.5 kB

    Total Files

    3

    Last publish

    Collaborators

    • max-hu
    • xkbhcq
    • jws132
    • dzweb
    • bruceliu68
    • kakarrotto
    • eric168