UNPKG

@progress/kendo-react-animation

Version:

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

91 lines (90 loc) 3.1 kB
/** * @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`&mdash;Pushes the content from left to right. * * `up`&mdash;Pushes the content from bottom to top. * * `down`&mdash;Pushes the content from top to bottom. * * `left`&mdash;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>; }; };