@furo/layout/dist/impl/FuroBackdropDisplay.d.ts

Layout components for furo

import { LitElement } from 'lit';
declare const FuroBackdropDisplay_base: (new (...args: any[]) => import("@furo/fbp/dist/LitFBPAC").LitFBPAC) & typeof LitElement;
/**
 * `furo-backdrop-display`
 *
 * This components receives and displays the backdrop requests from furo-backdrop components.
 *
 * The backdrop display can be placed anywhere in the dom. The higher the better.
 *
 * Tipp: place it below or inside the component which applies the style vars. Othewise the displayed components
 * do not know these vars.
 *
 * ```html
 * <!-- place the display in your main-stage -->
 * <furo-backdrop-display></furo-backdrop-display>
 * ```
 *
 * @cssprop {0px} [--furo-backdrop-color=#6d6d6d] - background color of backdrop
 *
 * @summary Display component for furo-backdrop
 * @customElement
 * @demo demo-furo-backdrop Basic usage
 * @appliesMixin FBP
 */
export declare class FuroBackdropDisplay extends FuroBackdropDisplay_base {
    /**
     * Needed to start the animation.
     * @private
     */
    start: boolean;
    /**
     * Indicates that the backdrop is shown.
     * @private
     */
    show: boolean;
    /**
     * Timeout duration, to wait to notify the changes.
     *
     * Note: the animations in the css are set with 250ms.
     *
     * If you are interested to use at-opened to load some data, set this value lower. This gives you 250 ms extra time to load content, without feeling slow.
     *
     * If you are interested to use at-opened to show some ui stuff, set this value higher or equal 250.
     *
     * @type Number
     */
    toDuration: number;
    private contentSource;
    /**
     * flow is ready lifecycle method
     * @private
     */
    _FBPReady(): void;
    /**
     * closes the backdrop.
     * You can close the backdrop on the display element, this is useful when you want to close the backdrops on page
     * changes.
     *
     * Usually the component which triggers the backdrop or is displayed closes it.
     */
    close(): void;
    /**
     * Themable Styles
     * @private
     * @return {CSSResult}
     */
    static get styles(): import("lit").CSSResult;
    /**
     * @private
     * @returns {TemplateResult}
     * @private
     */
    render(): import("lit").TemplateResult<1>;
}
export {};