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 设计,提供其中常用组件,支持响应式布局. 我 ...
随机推荐
- Sailing
Sailing 目录 1基本信息 2歌曲简介 3歌词内容 4歌手简介 5专辑介绍 1基本信息编辑 歌曲: Sailing 所属专辑: Atlantic Crossing 艺人:Rod Stewart[ ...
- U-Mail:多方面因素避免EDM邮件进垃圾箱
有很多做邮件营销的企业客户给U-Mail来电或来函咨询一件困扰他们的事:群发邮件时,要怎么样才能降低被收件人列入垃圾邮件的概率呢?其实关于这个问题,U-Mail小编已经请资深营销专家解答过多次了,经常 ...
- Hibernate入门步骤及概念
1.什么是Hibernate Hibernate是一个开发源代码的对象关系映射框架,它对JDBC进行非常轻量级的对象封装,使得程序员可以随心所欲地使用对象编程思维来操纵数据库.Hibernate可以应 ...
- Centos7使用yum安装Mysql5.7.19的详细步骤(可用)
Centos7的yum源中默认是没有mysql,因为现在已经用mariaDB代替mysql了. 首先我们下载mysql的repo源,我们可以去mysql官网找最新的repo源地址 地址: https: ...
- 2243. [SDOI2011]染色【树链剖分】
Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段), 如 ...
- Hadoop学习之路(七)Hadoop集群shell常用命令
Hadoop常用命令 启动HDFS集群 [hadoop@hadoop1 ~]$ start-dfs.sh Starting namenodes on [hadoop1] hadoop1: starti ...
- USB协议规范文档简介
USB协议规范文档简介 USB驱动开发必须对USB相关的协议规范有一定程度的了解,理解得越深,遇到的问题就会越少,解决问题的速度也就越快. 工欲善其行,必先利其器.USB协议规范就是USB ...
- 拥抱.NET Core系列:MemoryCache 缓存过期 (转载)
阅读目录 MSCache项目 MSCache提供的过期方式 绝对时间到期 滑动时间到期 自定义过期策略 过期策略组合拳 缓存过期回调 写在最后 在上一篇”拥抱.NET Core系列:MemoryCac ...
- 【H5】ie8如何兼容html5标签(hack)
ie8是识别不了html5语义化标签的,解决方法: 在头部文件的<head></head>里面下如下代码 (这段代码的意思是如果ie版本低于ie8,就创建所有HTML5新 ...
- GoodUserInterface 模仿页面功能
模仿一些好的应用中的好的界面或功能.平时使用的APP有很多,其中一些都是常见的功能的拼凑,在业务层面比较复杂,而具体的页面实现都很类似.在这种情况下,我们还会发现有一些APP的页面效果的实现方式比较独 ...