React Reference > Dialog Component

<Dialog />

使い方 

<Dialog onCancel={this.onCancel}
     isOpen={this.props.isOpen}
     style={{height: 250}}  cancelable>
     <Page>
       Page Content
     </Page>
    </Dialog>

Prop一覧

[編集]
名前 型 / デフォルト値 概要
visible bool Indicates whether the dialog is open and shown. （翻訳中） Optional.
disabled bool Specifies whether the dialog is disabled. （翻訳中） Optional.
cancelable bool

Specifies whether the dialog is cancelable or not. A cancelable dialog will call onDialogCancel when tapping the background or pressing the back button on Android devices.

（翻訳中） Optional.
onDialogCancel func Called only if cancelable is true. It will be called after tapping the background or by pressing the back button on Android devices. （翻訳中） Optional.
onCancel func DEPRECATED! Use onDialogCancel instead. （翻訳中） Optional.
isOpen bool DEPRECATED! Use visible instead. （翻訳中） Optional.
isCancelable bool DEPRECATED! Use cancelable instead. （翻訳中） Optional.
isDisabled bool DEPRECATED! Use disabled instead. （翻訳中） Optional.
animation string The animation used when showing and hiding the dialog. Can be either "none" or "default". （翻訳中） Optional.
modifier string The appearance of the dialog. （翻訳中） Optional.
maskColor string Color of the background mask. Default is “rgba(0, 0, 0, 0.2)” （翻訳中） Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. （翻訳中） Optional.
onPreShow func Called just before the alert dialog is displayed. （翻訳中） Optional.
onPostShow func Called just after the alert dialog is displayed. （翻訳中） Optional.
onPreHide func Called just before the alert dialog is hidden. （翻訳中） Optional.
onPostHide func Called just after the alert dialog is hidden. （翻訳中） Optional.
onDeviceBackButton func Custom handler for device back button. （翻訳中） Optional.

プリセットのmodifier

[編集]
Name 概要
material マテリアルデザインのダイアログを表示します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。