React Reference > Popover Component

<Popover />

使い方 

<Page>
 <Button
   ref={(btn) => { this.btn = btn; }}
   onClick={() =>
     this.setState({target: this.btn, isOpen: true})
   }
 />
    <Popover
      isOpen={this.state.isOpen}
      onCancel={() => this.setState({isOpen: false})}
      getTarget={() => this.state.target}
    >
      <div style={{textAlign: 'center', opacity: 0.5}}>
        <p>This is a popover!</p>
          <p><small>Click the background to remove the popover.</small></p>
        </div>
        </Popover>
</Page>

Prop一覧

[編集]
名前 型 / デフォルト値 概要
getTarget func This function should return a ref to the DOM node that the popover will target. （翻訳中） 必須
onDialogCancel func Called only if isCancelable 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 Indicates whether the dialog is open and shown. （翻訳中） 必須
cancelable bool

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

（翻訳中） Optional.
isCancelable bool DEPRECATED! Use cancelable instead. （翻訳中） Optional.
disabled bool Specifies whether the dialog is disabled. （翻訳中） 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.

お困りですか?

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

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

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