Slide animation

Add sliding animation to expandable contents.

Slide

If a slide animation for some collapsible content is needed, the Slide component can be used.

Usage

The Slide component should wrap the content that collapse and expand.

import { Slide } from "@kiwicom/orbit-components";
<Slide expanded={isExpanded} maxHeight={height}>
{collapsibleContent}
</Slide>;

Props

NameTypeDefaultDescription
transitionDurationstring"fast"Determines the duration of the animation. Can be "slow", "normal" or "fast.
childrenReact.NodeThe expandable content that should be animated.
maxHeightnumber \| nullThe maximum height the animation should take. Usually it is the height of the container.
expandedbooleanfalseDetermines if the content is expanded of not. When changed to true, the animation occurs.
idstringSets the id for the wrapper component responsible for the animation.
ariaLabelledBystringSets the ariaLabelledBy for the wrapper component responsible for the animation.