furo-ui5-dialog #

@furo/ui5 v1.18.0
import '@furo/ui5/src/furo-ui5-dialog.js';
exports FuroUi5Dialog js
extends src/furo-ui5-dialog.js

Summary: Dialog element

Description #

The furo-ui5-dialog is a extended ui5-dialog which can attach itself to a parent dom element.

This is helpful, when you have used z-indexes in one of the parents, which put the original ui5-dialog behind the backdrop.

Use this component like a regular ui5-dialog and do not forget to place the furo-ui5-dialog-display in one of the parent elements.

It supports all features from the SAP ui5 Dialog element.

important: Place a furo-ui5-dialog-display in any dom parent of the component where you use furo-ui5-dialog. Your app-shell or body is a good place to do that.

1
2
3
4
5
6

<furo-ui5-dialog header-text="Dialog title" fn-show="--openDialogClicked" fn-close="--closeDialogClicked">
  <p>Content</p>
  <div slot="footer"> <button at-click="--closeDialogClicked">close dialog</button></div>
</furo-ui5-dialog>

<button at-click="--openDialogClicked">Open dialog</button>

Sample #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<furo-ui5-dialog 
  header-text="Dialog title" 
  fn-show="--openDialogClicked" 
  fn-close="--closeDialogClicked">
  <p>Content</p>
  <div slot="footer">
    <button @-click="--closeDialogClicked">close dialog</button>
  </div>
</furo-ui5-dialog>

<button @-click="--openDialogClicked">open dialog</button>

Note: furo-ui5-dialog-display is placed in body

Attributes and Properties #

Methods #

show #

show() ⟹ void

* → fn-show

shows the dialog