All Components

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

ExpandProps

Represent the props of the
Kendo UI Expand Animation component for React.

<style>
.content {
 width: 100px;
 padding: 10px;
 color: #787878;
 background-color: #fcf7f8;
 font-size: 13px;
 font-family: Helvetica, Arial, sans-serif;
 letter-spacing: 1px;
 text-align: center;
 border: 1px solid rgba(0,0,0,.05);
}
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, direction: 'vertical' };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }
    onChange = (e) => {
        this.setState({ direction: e.target.value })
    }

    render() {
        const { show, direction } = this.state;

        const children = show ? (<div className="content">Content</div>) : null;

        return (
            <div className="row">
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Expand: {direction}
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>
                    <Expand direction={direction}>
                        {children}
                    </Expand>
                </div>
                <div className="col-md-6">
                    <dl>
                        <dt>
                            Direction:
                        </dt>
                        <dd>
                            <div className="example-config">
                                <label>
                                    <input
                                         type="radio"
                                         name="direction"
                                         value="vertical"
                                         defaultChecked={this.state.direction === 'vertical'}
                                         onClick={this.onChange}
                                     />
                                    &nbsp;Vertical
                                </label>
                                <br />
                                <label>
                                    <input
                                         type="radio"
                                         name="direction"
                                         value="horizontal"
                                         defaultChecked={this.state.direction === 'horizontal'}
                                         onClick={this.onChange}
                                     />
                                    &nbsp;Horizontal
                                </label>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

appear? boolean

Defines whether a transition should happen on the first mount. Defaults to false.

childFactory? any

After the element reached its exit state, it is no longer available in the DOM.
If a DOM operation is required, access it trough the childFactory function.

className? string

Specifies the CSS class names which are set to the Animation.

component? string

Specifies the node type of the parent Animation. Defaults to div.

componentChildClassName? string

Specifies the CSS class names which are set to each of the animated children elements.

componentChildStyle? any

Specifies the styles which are set to each of the animated children elements.

direction? ExpandDirection

Specifies the direction of the Expand Animation. Defaults to vertical.

enter? boolean

Specifies whether to animate the entering (showing) element
(see example). Defaults to true.

exit? boolean

Specifies whether to animate a leaving (disappearing) element
(see example). Defaults to true.

id? string

Specifies the id of the Animation.

mountOnEnter? boolean

Specifies if the Animation will use lazy-mounting on the first in={true}. Defaults to false.

onEnter? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the Animation has not started yet
(more information and example).

onEntered? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the Animation is now finished
(more information and example).

onEntering? (event: AnimationEventArguments) => void

Called when a component is added to an existing Animation component and the Animation is now happening
(more information and example).

onExit? (event: AnimationEventArguments) => void

An event that is called after the Animation has reached its exit state
(more information and example).

onExited? (event: AnimationEventArguments) => void

An event that is called after the Animation has reached its exited state
(more information and example).

onExiting? (event: AnimationEventArguments) => void

An event that is called after the Animation has reached its exiting state
(more information and example).

style? any

Specifies the style of the parent Animation.

transitionEnterDuration? number

Specifies the duration of the transition for the entering Animation (animation in)
([see example])(/kendo-react-ui/components/animation/duration/).
After the time runs out, the Animation is terminated. Defaults to 300ms.

transitionExitDuration? number

Specifies the duration of the transition for the exiting Animation (animation out)
([see example])(/kendo-react-ui/components/animation/duration/)ss.
After the time runs out, the Animation is terminated. Defaults to 300ms.

unmountOnExit? boolean

Specifies if the Animation will unmount after it reaches its exited state. Defaults to false.

In this article