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

0.1.1 • 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-model

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.

Dependencies (5)

Dev Dependencies (8)

Package Sidebar

Install

npm i xy-model

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

20.2 kB

Total Files

26

Last publish

Collaborators

  • xueyou2000