@progress/kendo-react-animation/Slide.d.ts

React Animation component assists with animating HTML elements. KendoReact Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { default as PropTypes } from 'prop-types';
import { AnimationInterface } from './AnimationInterface.js';
import * as React from 'react';
/**
 * Specifies the direction of the Slide Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#toc-slide)).
 *
 * The supported directions are:
 * * (Default) `down`—On showing, slides the content from top to bottom, and vice-versa.
 * * `up`—On showing, slides the content from bottom to top, and vice-versa.
 * * `left`—On showing, slides the content from right to left, and vice-versa.
 * * `right`—On showing, slides the content from left to right, and vice-versa.
 */
export type SlideDirection = 'up' | 'down' | 'left' | 'right';
/**
 * Represents the props of the [KendoReact Slide Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-slide).
 */
export interface SlideProps extends AnimationInterface {
    /**
     * A function for customizing the rendering of child elements.
     *
     * @example
     * <Slide childFactory={(child) => React.cloneElement(child, { style: { opacity: 0.5 } })} />
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names to be applied to the Animation container.
     *
     * @example
     * <Slide className="slide-animation" />
     */
    className?: string;
    /**
     * Specifies the direction of the Slide Animation.
     *
     * @default "down"
     * @example
     * <Slide direction="left" />
     */
    direction?: SlideDirection;
    /**
     * Specifies the HTML tag of the parent Animation container.
     *
     * @default "div"
     * @example
     * <Slide component="article" />
     */
    component?: React.ReactNode;
    /**
     * Specifies the `id` attribute of the Animation container.
     *
     * @example
     * <Slide id="slide-animation-container" />
     */
    id?: string;
    /**
     * Specifies the inline styles to be applied to the Animation container.
     *
     * @example
     * <Slide style={{ margin: "10px" }} />
     */
    style?: any;
}
export declare const Slide: {
    (props: SlideProps): React.JSX.Element;
    propTypes: {
        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
        childFactory: PropTypes.Requireable<any>;
        className: PropTypes.Requireable<string>;
        direction: PropTypes.Requireable<string>;
        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        id: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<any>;
    };
};