Nonlinear Performance Magnification

    xy-messagebox
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published
    IE Chrome Firefox Opera Safari
    IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

    NPM version node version npm download

    xy-messagebox

    xy-messagebox

    消息框组件, 弹出提示框,确认框,输入框。

    安装

    # yarn 
    yarn add xy-messagebox

    使用例子

    import React from "react";
    import ReactDOM from "react-dom";
    import { MessageBox, Alert, Confirm, Prompt, MessageBoxLocal, MessageBoxPopup } from "xy-messagebox";
    ReactDOM.render(<Alert title="警告" message="确定退出系统吗?" />, container);

    js 调用

    var close = MessageBoxPopup.Alert({
        title: "提示",
        message: (
            <p>
                这是提示 <a onClick={() => close()}>关闭</a>
            </p>
        ),
        onClose: () => {
            console.log("关闭了");
        },
    });

    API

    MessageBox

    属性 说明 类型 默认值
    visible 是否显示 boolean false
    defaultVisible 否默认显示 boolean false
    initialFocus 对话框打开焦点元素选择器 boolean
    getContainer 返回一个容器来装载抽屉 HTMLElement/() => HTMLElement
    children 对话框内容 React.ReactNode
    fixed 是否固定 boolean true
    showMask 是否显示蒙层 boolean true
    maskClose 蒙层是否可关闭对话框 boolean true
    closeOnPressEsc 是否 ESC 关闭 boolean true
    onChange 对话框可视改变事件 (visible: boolean) => void
    onKeyDown 键盘按下事件 (event: React.KeyboardEvent) => void
    onUnmount 对话框关闭动画结束 Function
    onClose 关闭事件 Function
    getCloseFunc 获取关闭函数 (close: Function) => void

    Alert

    属性 说明 类型 默认值
    title 标题 React.ReactNode
    message 内容 React.ReactNode
    type 图标类型 "info"/"success"/"error"/"warning"/IconDefinition "info"
    confirmText 确定按钮文本 string
    footer 自定义页脚按钮 React.ReactNode

    Confirm

    属性 说明 类型 默认值
    title 标题 React.ReactNode
    message 内容 React.ReactNode
    confirmText 确定按钮文本 React.ReactNode
    cancelText 取消文本 React.ReactNode
    onConfirm 确定事件 () => Promise
    onCancel 取消事件 Function

    Prompt

    属性 说明 类型 默认值
    title 标题 React.ReactNode
    message 内容 React.ReactNode
    confirmText 确定按钮文本 React.ReactNode
    cancelText 取消文本 React.ReactNode
    onConfirm 确定事件 (value: strin) => Promise
    onCancel 取消事件 Function
    defaultValue 默认内容 string
    placeholder 占位符文本 string
    valid 验证函数, 验证成功返回 true, 严重失败返回失败原因字符串 (val: string) => boolean string

    开发

    yarn run start

    例子

    http://localhost:6006

    测试

    yarn run test
    

    开源许可

    xy-messagebox is released under the MIT license.

    Install

    npm i xy-messagebox

    DownloadsWeekly Downloads

    15

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    50.6 kB

    Total Files

    36

    Last publish

    Collaborators

    • xueyou2000