@itwin/itwinui-react/esm/core/Overlay/Overlay.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type OverlayComponentProps = {
    /**
     * Page elements that are blurred by the Overlay. Will become blurred and inert.
     */
    children?: React.ReactNode;
    /**
     * Content shown inside the Overlay, on top of the blurred content.
     *
     * Can be used to show a loading indicator.
     */
    content?: React.ReactNode;
};
/**
 * The Overlay component can be used to hide some UI while its content is loading or revalidating,
 * and display a loading indicator on top of it.
 *
 * The hidden content gets blurred and becomes inert so it cannot be interacted with.
 *
 * @example
 * <Overlay content="loading…">
 *   content beneath the overlay… (text, img, etc.)
 * </Overlay>
 *
 * @example
 * <Overlay.Wrapper>
 *   <Overlay.Overlay>
 *     loading…
 *   <Overlay.Overlay>
 *   <Overlay.HiddenContent>
 *     content beneath the overlay… (text, img, etc.)
 *   <Overlay.HiddenContent />
 * </Overlay.Wrapper>
 */
export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
    /**
     * The main component is a wrapper to hold the
     * `Overlay.HiddenContent` and `Overlay.Overlay`.
     */
    Wrapper: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * `Overlay.HiddenContent` houses page elements that are blurred by the
     * Overlay. These elements will become inert when the overlay is active.
     */
    HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
    /**
     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
     * any arbitrary content like a progress indicator and loading message.
     */
    Overlay: PolymorphicForwardRefComponent<"div", {}>;
};
export {};