@eccenca/gui-elements/dist/types/components/Sticky/StickyTarget.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Set the side the element need to be sticky on.
     */
    to?: "top" | "bottom";
    /**
     * The sticky area is positioned relatively to a local scroll area.
     * The application header is not taken into offset calculation
     */
    local?: boolean;
    /**
     * Set additional distance to original sticky position.
     */
    offset?: `${number}${string}`;
    /**
     * Set the background color used for the sticky area.
     * As it can overlay other content readability could be harmed if the overlayed content is shining through.
     */
    background?: "card" | "application" | "transparent";
    /**
     * In some situations there could be a gap between sticky target area and the border of the related scroll area.
     * The main gap is the gap towards the direction of the sticky behaviour, specified by `to`.
     * You can fill this gap with a gradient or full background color.
     */
    fillMainGap?: "full" | "gradient";
    /**
     * The secondary gap is the gap against the direction of the sticky behaviour.
     * So in case of `to="top"` this is rendered on the bottom of the sticky area.
     */
    fillSecondaryGap?: "full" | "gradient";
    /**
     * Callback that returns an DOM element.
     * The position of `StickyTarget` is then calculated relative to that element.
     */
    getConnectedElement?: (ref: React.MutableRefObject<HTMLDivElement | null>) => Element | false;
}
/**
 * Element wraps the content that need to be displayed sticky.
 * The content then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
 */
export declare const StickyTarget: ({ className, to, local, offset, background, fillMainGap, fillSecondaryGap, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
export default StickyTarget;