>웹 프론트엔드 >JS 튜토리얼 >x-dailog 팝업창 부동 레이어 구성 요소 소개

x-dailog 팝업창 부동 레이어 구성 요소 소개

零下一度
零下一度원래의
2017-06-26 13:40:331879검색

react.js 플러그인 개발, x-dailog 팝업 플로팅 레이어 컴포넌트

모든 컴포넌트에는 고유한 스타일과 속성 이벤트 콜백 구성이 있어야 한다고 생각합니다. 그래서 x-dialog에 간단한 기본 스타일과 다양한 기본 구성 항목을 제공하겠습니다. 모든 React 플러그인 예제는 React China에 포함됩니다.

데모 주소: x-dialog 다양한 사례 시연

소스 파일 주소:

npm 설치

npm을 사용하여 설치, 실행

$ npm install x-dialog --save-dev

호출 방법

f8ca1dd5f31ffa2c29a403c3a3e2a314c6ad4ef4971e9ccb89f279ee59475db8我知道了65281c5ac262bf6d81768915a4a77ac04dc7657165739e8300e24fddb7916981关闭65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68  afterShow:()=>alert('我显示出来了')
      afterHide:()=>alert('我又隐藏了')>
    dc6dce4a544fdca2df29d5ac0ea9906b这里是弹窗的内容区域16b28748ea4df4d9c2150843fecfba68
cdbd04b39aef3204efdba40c011c41db

속성 메서드

isShow :bool typeisShow :bool类型

控制弹窗的显示隐藏的.

title:string类型

为空时,不显示标题.

 

className:string类型

弹窗的样式类

 

timer:number类型

定时关闭,可不传。

 

width:number类型

弹窗宽度,不足时,内容区域出现上下滚动

 

height:number类型

弹窗宽度,不足时,内容区域出现上下滚动

 

buttons:node类型

自定义操作区域的按钮,为false类型时不显示操作区域,不传时默认显示 `确定、取消`

 

okCallback:func类型

当默认按钮的情况下时,点击`确定`时的回调方法,点`取消`时直接隐藏,如果需要定制更多的方法,建议传递`buttons`属性。

 

afterShow:func类型

显示的回调方法

 

afterHide

关闭隐藏时的回调方法
제목:문자열 유형

rrreee🎜🎜 🎜🎜className:문자열 유형🎜🎜rrreee🎜 🎜 🎜🎜타이머:숫자 유형🎜🎜rrreee🎜🎜 🎜🎜너비:숫자 유형🎜🎜rrreee🎜🎜🎜🎜높이:숫자 유형 🎜🎜rrreee🎜🎜 🎜🎜버튼: 노드 유형 🎜🎜rrreee🎜🎜 🎜🎜okCallback: func 유형 🎜🎜rrreee🎜🎜 🎜🎜afterShow:func type🎜🎜rrreee🎜🎜🎜🎜afterHide:func type🎜🎜rrreee🎜🎜첨부: React.js 다운로드 주소🎜

위 내용은 x-dailog 팝업창 부동 레이어 구성 요소 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.