react.js插件开发,x-dailog弹窗浮层组件
react.js插件开发,x-dailog弹窗浮层组件
我认为,每一个组件都应该有他自带的样式和属性事件回调配置。所以我会给x-dialog默认一套简单的样式,和各种默认的配置项。所有react插件示例都会收录在react中国上。
演示地址: x-dialog各种案例演示
源文件地址:https://github.com/react-plugin/x-dialog
npm安装
使用 npm 安装, 运行
$ npm install x-dialog --save-dev
调用方式
<Dialog
isShow: true
title: "这是一个例子"
className:"myClass"
timer:
width:
height:
buttons: <div><button className="d-ok" onClick={this.hide.bind(this)}>我知道了</button><button className="d-cancel" onClick={this.hide.bind(this)}>关闭</button></div>
afterShow:()=>alert('我显示出来了')
afterHide:()=>alert('我又隐藏了')
>
<div>这里是弹窗的内容区域</div>
</Dialog>
属性方法
isShow
:bool类型
控制弹窗的显示隐藏的.
title
:string类型
为空时,不显示标题.
className
:string类型
弹窗的样式类
timer
:number类型
定时关闭,可不传。
width
:number类型
弹窗宽度,不足时,内容区域出现上下滚动
height
:number类型
弹窗宽度,不足时,内容区域出现上下滚动
buttons
:node类型
自定义操作区域的按钮,为false类型时不显示操作区域,不传时默认显示 `确定、取消`
okCallback
:func类型
当默认按钮的情况下时,点击`确定`时的回调方法,点`取消`时直接隐藏,如果需要定制更多的方法,建议传递`buttons`属性。
afterShow
:func类型
显示的回调方法
afterHide
:func类型
关闭隐藏时的回调方法
react.js插件开发,x-dailog弹窗浮层组件的更多相关文章
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- React.js学习之理解JSX和组件
在开启JSX的学习旅程前,我们先了解一下React的基本原理.React本质上是一个"状态机",它只关心两件事:更新DOM和响应事件,React不处理Ajax.路由和数据存储,也不 ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- 当今流行的 React.js 适用于怎样的 Web App?
外村 和仁(株式会社 ピクセルグリッド) React.js是什么? React.js是Facebook开发的框架. http://facebook.github.io/react/ 官网上的描述是「 ...
- React.js 小书 Lesson15 - 实战分析:评论功能(二)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善其 ...
- React.js 的 context
这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context.但是了解它对于了解接下来要讲解的 React-redux 很有好处,所以大家可以简单了解一下它的概念和作用. 在过 ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
随机推荐
- Flex布局及其应用
什么是弹性盒子? 弹性盒子是 CSS3 的一种新的布局模式.相对于传统的依赖于display+position+float的布局方式,弹性盒子更加以有效的方式来对一个容器中的子元素进行排列.对齐和分配 ...
- 【原创】Spring 注入方式
Spring 强烈推荐注解在构造器上,且对于不能为null的字段或者属性都用断言. 1. 设值注入 原理:通过setter方法注入 XML配置方式:bean下的property标签,用value指定基 ...
- configuration on ubuntu server
1.network configuration 1.1 static ip sudo vi /etc/network/interfaces auto eth0 iface eth0 inet stat ...
- JavaScript计算指定日期与当前日期的相差天数
java中处理2个时间段相差几天很容易,直接调相关方法就行,不过js处理这类问题稍微有点不易,项目开发中也用到了,如下: 1 2 3 4 5 6 7 8 9 10 11 12 //计算两个日期天数差的 ...
- python-一个小爬虫,爬取图片
import re import urllib.request # 爬取网页 def getHtml(url): page=urllib.request.urlopen(url) html=page. ...
- jenkins + sonar 安装配置
最近把snoar 添加上了 [root@snoar data]# wget https://sonarsource.bintray.com/Distribution/sonarqube/sonar ...
- 20145203盖泽双实验一 Java开发环境的熟悉(Linux + Eclipse)
实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- c++——默认参数、函数占位参数
2 默认参数 /*1 C++中可以在函数声明时为参数提供一个默认值, 当函数调用时没有指定这个参数的值,编译器会自动用默认值代替 */ void myPrint(int x = 3) { printf ...
- week3编程作业: Logistic Regression中一些难点的解读
%% ============ Part : Compute Cost and Gradient ============ % In this part of the exercise, you wi ...