@progress/kendo-react-animation
Version:
React Animation component assists with animating HTML elements. KendoReact Animation package
91 lines (90 loc) • 3.1 kB
TypeScript
/**
* @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 Push Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#toc-push)).
*
* The supported directions are:
* * (Default) `right`—Pushes the content from left to right.
* * `up`—Pushes the content from bottom to top.
* * `down`—Pushes the content from top to bottom.
* * `left`—Pushes the content from right to left.
*/
export type PushDirection = 'up' | 'down' | 'left' | 'right';
/**
* Represents the props of the [KendoReact Push Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-push).
*/
export interface PushProps extends AnimationInterface {
/**
* A function for customizing the rendering of child elements.
*
* @example
* <Push childFactory={(child) => React.cloneElement(child, { tabIndex: 0 })} />
*/
childFactory?: any;
/**
* Specifies the CSS class names to be applied to the Animation container.
*
* @example
* <Push className="push-animation" />
*/
className?: string;
/**
* Specifies the direction of the Push Animation.
*
* @default "right"
* @example
* <Push direction="up" />
*/
direction?: PushDirection;
/**
* Specifies the HTML tag of the parent Animation container.
*
* @default "div"
* @example
* <Push component="footer" />
*/
component?: React.ReactNode;
/**
* Specifies the `id` attribute of the Animation container.
*
* @example
* <Push id="push-animation-container" />
*/
id?: string;
/**
* Specifies the inline styles to be applied to the Animation container.
*
* @example
* <Push style={{ border: "1px solid black" }} />
*/
style?: any;
/**
* Determines whether child elements will stack on top of each other during the animation.
*
* @default false
* @example
* <Push stackChildren={true} />
*/
stackChildren?: boolean;
}
export declare const Push: {
(props: PushProps): 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>;
stackChildren: PropTypes.Requireable<boolean>;
};
};