 |
 |
 |
 |
 |
|---|---|---|---|---|
| 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例子
测试
yarn run test
开源许可
xy-model is released under the MIT license.
