bee-modal
ModalDialogl ui component for react
Last updated 2 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-modal 
SYNC missed versions from official npm registry.

bee-modal

npm version Build Status Coverage Status

Browser Support

IE Chrome Firefox Opera Safari
IE 9+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

react bee-modal component for tinper-bee

模态框组件

使用方法

import Modal from 'bee-modal';

class ModalDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
    }

    close() {
        this.setState({ showModal: false });
    }

    open() {
        this.setState({ showModal: true });
    }
    render () {
        return (
            <div>
              <Button color="primary" size="large" onClick={this.open}>
                点击打开模态框
              </Button>
              <Modal show = {
                  this.state.showModal
              }
              onHide = {
                  this.close
              }>
                <Modal.Header>
                  <Modal.Title>标题</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                  正文描述。。。
                </Modal.Body>

                <Modal.Footer>
                  <Button>关闭</Button>
                  <Button color="primary">确认</Button>
                </Modal.Footer>

              </Modal>
            </div>
        )
    }
}

);

ReactDOM.render(
        <ModalDemo />
        , document.getElementById('target'));

样式引入

  • 可以使用link引入build目录下Modal.css
<link rel="stylesheet" href="./node_modules/bee-modal/build/Modal.css">
  • 可以在js中import样式
import "./node_modules/bee-modal/src/Modal.scss"
//或是
import "./node_modules/bee-modal/build/Modal.css"

API

Modal

参数 说明 类型 默认值
backdrop 是否弹出遮罩层 boolean true
backdropClosable 遮罩层点击是否触发关闭 boolean true
keyboard esc触发关闭 boolean -
animation 显隐时是否使用动画 boolean true
dialogComponentClass 传递给模态框使用的元素 string/element -
dialogClassName 传递给模态框的样式 class -
autoFocus 自动设置焦点 boolean true
enforceFocus 防止打开时焦点离开模态框 boolean true
show 是否打开模态框 boolean -
width 模态框宽度,如只传数字则会拼接默认单位 px。例如 100px/100/100%/100rem/100em string/number -
onHide 关闭时的钩子函数 function -
size 模态框尺寸 sm/lg/xlg -
width 自定义模态框尺寸 string/number -
onEnter 开始显示时的钩子函数 function -
onEntering 显示时的钩子函数 function -
onEntered 显示完成后的钩子函数 function -
onExit 隐藏开始时的钩子函数 function -
onExiting 隐藏进行时的钩子函数 function -
onExited 隐藏结束时的钩子函数 function -
container 容器 DOM元素\React组件\或者返回React组件的函数 -
onShow 当模态框显示时的钩子函数 function -
renderBackdrop 返回背景元素的函数 function -
onEscapeKeyUp 响应ESC键时的钩子函数 function -
onBackdropClick 点击背景元素的函数 function -
backdropStyle 添加到背景元素的style object -
backdropClassName 添加到背景元素的class string -
transition 动画组件 function -
dialogTransitionTimeout 设置动画超时时间 function -
backdropTransitionTimeout 设置背景动画超时时间 function -
manager 管理模态框状态的组件 required -
draggable 设置模态框是否可拖拽 bool false
resizable 设置模态框是否可resize bool false
resizeClassName 设置拖拽dom的class名称 string -
onResizeStart resize开始时的回调 function -
onResize resize时的回调 function -
onResizeStop resize结束时的回调 function -
minWidth resize时模态框的最小宽度 number/string 200
minHeight resize时模态框的最小高度 number/string 150
maxWidth resize时模态框的最大宽度 number/string -
maxHeight resize时模态框的最大高度 number/string -

Modal.Header

参数 说明 类型 默认值
closeButton 是否显示关闭按钮 boolean false

Modal.method()

包括:

  • Modal.info
  • Modal.success
  • Modal.error
  • Modal.warning
  • Modal.confirm

以上均为一个函数,参数为 object,具体属性如下:

参数 说明 类型 默认值
cancelText 取消按钮文字 string 取消
okText 确认按钮文字 string 确定
okType 确认按钮类型,取值范围(primary/secondary/success/info/warning/danger/dark/light) string primary
title 标题 string/ReactNode -
content 内容 string/ReactNode -
className 容器类名 string -
icon 自定义图标 ReactNode <Icon type="uf-qm-c"/>
backdrop 是否弹出遮罩层/点击遮罩层是否触发关闭 boolean/"static" true
width 宽度 string/number 400
onCancel 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function -
onOk 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function -

以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。

const modal = Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();
  • Modal.destroyAll 使用 Modal.destroyAll() 可以销毁弹出的确认窗(即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm)。通常用于路由监听当中,处理路由前进、后退不能销毁确认对话框的问题,而不用各处去使用实例的返回值进行关闭(modal.destroy() 适用于主动关闭,而不是路由这样被动关闭)
import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Modal.destroyAll();
});

已支持的键盘操作

按键 功能
esc 关闭模态框

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-modal
$ cd bee-modal
$ npm install
$ npm run dev

Current Tags

  • 2.1.9-alpha.0                                ...           alpha (8 months ago)
  • 2.1.0-beta.0                                ...           beta (a year ago)
  • 2.2.4                                ...           latest (2 months ago)

86 Versions

  • 2.2.4                                ...           2 months ago
  • 2.2.3                                ...           2 months ago
  • 2.2.2                                ...           2 months ago
  • 2.1.19                                ...           3 months ago
  • 2.2.1                                ...           3 months ago
  • 2.1.16                                ...           3 months ago
  • 2.2.0                                ...           3 months ago
  • 2.1.18                                ...           3 months ago
  • 2.1.17                                ...           3 months ago
  • 2.1.15                                ...           6 months ago
  • 2.1.14                                ...           6 months ago
  • 2.1.13                                ...           6 months ago
  • 2.1.12                                ...           7 months ago
  • 2.1.11                                ...           7 months ago
  • 2.1.10                                ...           8 months ago
  • 2.1.9                                ...           8 months ago
  • 2.1.9-alpha.0                                ...           8 months ago
  • 2.1.8                                ...           8 months ago
  • 2.1.7                                ...           8 months ago
  • 2.1.6                                ...           8 months ago
  • 2.1.5                                ...           10 months ago
  • 2.1.5-alpha.0                                ...           10 months ago
  • 2.1.4                                ...           10 months ago
  • 2.1.3                                ...           a year ago
  • 2.1.2                                ...           a year ago
  • 2.1.2-alpha.0                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.1.0-beta.0                                ...           a year ago
  • 2.0.22                                ...           a year ago
  • 2.0.22-alpha.0                                ...           a year ago
  • 2.0.21                                ...           a year ago
  • 2.0.21-beta.0                                ...           a year ago
  • 2.0.20                                ...           a year ago
  • 2.0.19                                ...           a year ago
  • 2.0.15                                ...           a year ago
  • 2.0.14                                ...           a year ago
  • 2.0.13                                ...           a year ago
  • 2.0.12                                ...           a year ago
  • 2.0.11                                ...           a year ago
  • 2.0.10                                ...           a year ago
  • 2.0.9                                ...           a year ago
  • 2.0.9-alpha.0                                ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           a year ago
  • 2.0.7-alpha.3                                ...           a year ago
  • 2.0.7-alpha.2                                ...           a year ago
  • 2.0.7-alpha.1                                ...           a year ago
  • 2.0.7-alpha.0                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.2.8                                ...           3 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.5                                ...           4 years ago
  • 0.2.4                                ...           4 years ago
  • 0.2.3                                ...           4 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.0.9                                ...           4 years ago
  • 0.0.8                                ...           4 years ago
  • 0.0.7                                ...           4 years ago
  • 0.0.6                                ...           4 years ago
  • 0.0.5                                ...           4 years ago
  • 0.0.4                                ...           4 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Downloads
Today 106
This Week 106
This Month 1,363
Last Day 17
Last Week 878
Last Month 4,556
Dependencies (9)
Dev Dependencies (25)

Copyright 2014 - 2016 © taobao.org |