Giter VIP home page Giter VIP logo

react-modal's Introduction

react-better-modal

A powerful modal dialog component for React.

🔥 一个功能强大的React弹窗组件。支持缩放、拖拽、最大化最小化、键盘事件移动弹窗位置(↑→↓←)、键盘事件缩放(CTRL + ↑→↓←)、键盘事件最大化最小化(ALT + ↑↓)。

Table of Contents

Installation

> npm i react-better-modal

# or 

> yarn add react-better-modal

Usage

import React from 'react';
import Modal from 'react-better-modal';
import 'react-better-modal/dist/index.css';
function onHandleMove(e) {
  console.log(e, '--->>> onHandleMove');
}
function onHandleResize(e) {
  console.log(e, '--->>> onHandleResize');
}


function onHandleOk() {
    console.log('onOk callback')
}

function onHandleCancel() {
  console.log('onCancel callback')
}


<Modal
  visible
  keyboard
  draggable
  resizable

  title="Hello Modal"
  cancelText={"自定义取消文字"}
  okText={"自定义确定文字"}

  onMove={onHandleMove}
  onResize={onHandleResize}
  onCancel={onHandleCancel}
  onOk={onHandleOk}
  onStageChange={console.log}
>
  Hello Modal!
</Modal>

API documentation

属性 说明 类型 默认值
appendContainer 设置 Modal 的 z-index number -
visible 对话框是否可见 boolean false
theme 皮肤(内置dark可选) string -
keyboard 是否支持键盘事件(关闭(ESC)、移动(↑→↓←)、缩放(CTRL + ↑→↓←)、最大最小化(ALT + ↑↓)) boolean true
useEsc 是否支持键盘esc关闭,优先级低于keyboard参数 boolean true
mask 是否展示遮罩 boolean true
maskStyle 遮罩样式 CSSProperties -
maskClassName 遮罩class string -
maskClosable 点击蒙层是否允许关闭 boolean false
shouldUpdateOnDrag 拖拽过程是否允许视图元素更新 boolean false
stage 对话框展示状态,默认(DEFAULT)、最大化(FULLSCREEN)、最小化(MINIMIZED)。受控属性,自动切换将无效,自行根据onStageChange回调控制 string DEFAULT
initialStage 对话框初始展示状态。值同stage但优先级低于stage string DEFAULT
onCancel 点击遮罩层或右上角叉或取消按钮的回调 function(e) -
onOk 点击确定回调 function(e) -
draggable 对话框是否可拖拽(只支持标题部分拖拽) boolean true
resizable 对话框是否可缩放 boolean true
stageChangeByDoubleClick 对话框是否可通过双击改变状态 boolean true
onMove 拖动对话框的回调 function(e) -
onResize 缩放对话框的回调 function(e) -
onStageChange 对话框状态改变的回调 function(e) -
style 可用于设置对话框样式,调位置等 CSSProperties -
className 对话框容器的类名 string -
width 对话框宽度(受控属性,自动缩放宽度将无效,自行根据onResize回调控制) number -
height 对话框高度(受控属性,自动缩放高度将无效,自行根据onResize回调控制) number -
top 对话框距离顶部位置(受控属性,垂直拖动将无效,自行根据onMove回调控制) number -
left 对话框距离左侧位置(受控属性,水平拖动将无效,自行根据onMove回调控制) number -
initialWidth 对话框初始宽度 number 520
initialHeight 对话框初始高度 number 400
initialTop 对话框初始距离顶部位置 number -
initialLeft 对话框初始距离左侧位置 number -
minWidth 对话框最小宽度 number 256
minHeight 对话框最小高度 number 256
zIndex 设置 Modal 的 z-index number 1000
title 标题 ReactNode -
titleBarClassName 对话框标题容器的类名 string -
minimizeButton 自定义最小化图标 ReactNode -
maximizeButton 自定义最大化图标 ReactNode -
restoreButton 自定义复原图标 ReactNode -
closeButton 自定义关闭图标 ReactNode -
contentClassName 对话框内容容器类名 string -
footerClassName 对话框底部容器类名 string -
showCancel 取消按钮是否可见 boolean true
showOk 确定按钮是否可见 boolean true
cancelText 取消按钮文字 ReactNode 取消
okText 确认按钮文字 ReactNode 确定
footer 底部内容,当不需要默认底部按钮时,可以设为 footer={null} ReactNode -

Demos

There are several demos hosted on CodeSandbox which demonstrate various features of react-better-modal.

  1. 基础用法
  2. 非受控初始宽高
  3. 受控宽高
  4. 非受控初始位置
  5. 受控位置
  6. 非受控弹窗状态
  7. 受控弹窗状态
  8. 键盘事件
  9. 内置主题
  10. 未覆盖部分请参考API Documentation

TODOS

  • animation
  • Testing
  • more themes

react-modal's People

Contributors

fossabot avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

fossabot

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.