| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

xy-model

模态对话框组件，有标题和页脚按钮。

安装

# yarn
yarn add xy-model

使用例子

ModelFooter将没有 onClick 事件的元素默认带上关闭对话框事件

import React from "react";
import ReactDOM from "react-dom";
import { Model, ModelBody, ModelFooter } from "xy-model";
ReactDOM.render(
    <Model title="对话框标题" maskClose={false} visible={visible} onChange={setVisible}>
        <ModelBody>
            <p>这是对话框内容</p>
            <p>这是对话框内容</p>
            <p>这是对话框内容</p>
            <p>这是对话框内容</p>
        </ModelBody>
        <ModelFooter>
            <Button type="text">取消</Button>
            <Button type="primary">确定</Button>
        </ModelFooter>
    </Model>,
    container,
);

API

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ------------------------ | ---------------------------------------------------- | ------ | | title | 对话框标题 | React.ReactNode | 无 | | 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 | 无 |

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-model is released under the MIT license.