@furo/layout
Version:
Layout components for furo
69 lines (68 loc) • 2.29 kB
TypeScript
import { LitElement } from 'lit';
export type BackdropEvent = {
handle: FuroBackdrop;
};
declare const FuroBackdrop_base: (new (...args: any[]) => import("@furo/fbp/dist/LitFBPAC").LitFBPAC) & typeof LitElement;
/**
* `furo-backdrop`
*
* Displays content with a backdrop.
*
* The element you place in to furo-backdrop will be displayed centered.
*
*
* ```html
* <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.
*
* @fires { FuroBackdrop } opened - 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.
*
*
* @fires { FuroBackdrop } closed - 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.
*
* @fires { FuroBackdrop } register-backdrop - Internal event to move the contents to the backdrop-display.
* Event.details {FuroBackdrop} is the reference to the emiting DOM node.
*
* @summary show content with backdrop
* @demo demo-furo-backdrop Basic usage
* @customElement
* @appliesMixin FBP
*/
export declare class FuroBackdrop extends FuroBackdrop_base {
displayHandle: HTMLDivElement | undefined;
/**
*
* @private
*/
_FBPReady(): void;
/**
* Initiates the backdrop and shows the content on top of the backdrop area.
*/
show(): void;
/**
* Hides the display.
*
* **Note:** The display will also get closed when the user clicks on the backdrop.
*/
close(): void;
/**
* Themable Styles
* @private
* @return {CSSResult}
*/
static get styles(): import("lit").CSSResult;
}
export {};