ホームページ > ウェブフロントエンド > 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 型isShow :bool类型

控制弹窗的显示隐藏的.
ログイン後にコピー

title:string类型

为空时,不显示标题.
ログイン後にコピー

className:string类型

弹窗的样式类
ログイン後にコピー

timer:number类型

定时关闭,可不传。
ログイン後にコピー

width:number类型

弹窗宽度,不足时,内容区域出现上下滚动
ログイン後にコピー
ログイン後にコピー

height:number类型

弹窗宽度,不足时,内容区域出现上下滚动
ログイン後にコピー
ログイン後にコピー

buttons:node类型

自定义操作区域的按钮,为false类型时不显示操作区域,不传时默认显示 `确定、取消`
ログイン後にコピー

okCallback:func类型

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

afterShow:func类型

显示的回调方法
ログイン後にコピー

afterHide

关闭隐藏时的回调方法
ログイン後にコピー
title:string type

rrreee🎜🎜 🎜🎜className:string type🎜🎜rrreee🎜 🎜 🎜🎜タイマー:数値型🎜🎜rrreee🎜🎜 🎜🎜:数値型🎜🎜rrreee🎜🎜🎜🎜高さ:数値型🎜🎜rrreee🎜🎜 🎜🎜ボタン: ノードタイプ 🎜🎜rrreee🎜🎜 🎜🎜okCallback: func タイプ 🎜🎜rrreee🎜🎜 🎜🎜afterShow:func type🎜🎜rrreee🎜🎜🎜🎜afterHide:func type🎜🎜rrreee🎜🎜添付ファイル:react.jsのダウンロードアドレス🎜

以上がx-dailog ポップアップ ウィンドウ フローティング レイヤー コンポーネントの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
前の記事:NodeJS TCPモジュールネットインスタンスの詳細説明 次の記事:カウントダウン効果を実現するための js のコード共有例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート