furo-backdrop #

@furo/layout v2.2.14
import '@furo/layout/src/furo-backdrop.js';
exports FuroBackdrop js
exports <furo-backdrop> custom-element-definition
superclass LitElement
mixes FBP
summary show content with backdrop

furo-backdrop

Displays content with a backdrop.

The element you place in to furo-backdrop will be displayed centered.

1
2
3
4
5

<furo-backdrop at-opened="--BackdropFocus" at-closed="--backdropClosed"
  fn-show="--expandIconClicked"
  fn-close="--closeRequested, --recordSelected">
     <any-component at-item-selected="--recordSelected" style="width: 90vw; height: 90vh"></any-component>
</furo-backdrop>

You can wire and use the elements in furo-backrop as if they were local elements.

Do not forget to add the furo-backdrop-display somewhere in the parent dom.

Attributes and Properties #

Events #

opened #

at-opened → FuroBackdrop

The opened event will be fired when the content is visible on the backdrop. Tipp: you can use this to focus something on the shown content. Event.details {FuroBackdrop} is the reference to the emiting DOM node.

closed #

at-closed → FuroBackdrop

The closed event will be fired when the displayed content is invisible and the backdrop is closed. Tipp: Maybe you want to use this event to refocus the initiator. Event.details {FuroBackdrop} is the reference to the emiting DOM node.

register-backdrop #

at-register-backdrop → FuroBackdrop

Internal event to move the contents to the backdrop-display. Event.details {FuroBackdrop} is the reference to the emiting DOM node.

Methods #

show #

show() ⟹ void

* → fn-show

Initiates the backdrop and shows the content on top of the backdrop area.

close #

close() ⟹ void

* → fn-close

Hides the display.

Note: The display will also get closed when the user clicks on the backdrop.