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

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

零下一度
풀어 주다: 2017-06-26 13:40:33
원래의
1844명이 탐색했습니다.

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

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

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

소스 파일 주소:

npm 설치

npm을 사용하여 설치, 실행

$ npm install x-dialog --save-dev
로그인 후 복사

호출 방법

<Dialog 
      isShow: true  title: "这是一个例子"  className:"myClass"  timer:2000  width:300  height:300  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(&#39;我显示出来了&#39;)
      afterHide:()=>alert(&#39;我又隐藏了&#39;)>
    <div>这里是弹窗的内容区域</div>
</Dialog>
로그인 후 복사

속성 메서드

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
이전 기사:nodeJS TCP 모듈 넷 인스턴스에 대한 자세한 설명 다음 기사:js를 사용하여 카운트다운 효과를 구현하기 위한 예제 코드 공유
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿