Pular para o conteĆŗdo

šŸŽ‰ Material UI v5 is out! Head to the migration guide to get started.

Slide API

The API documentation of the Slide React component. Learn more about the props and the CSS customization points.


import Slide from '@material-ui/core/Slide';
// or
import { Slide } from '@material-ui/core';

You can learn more about the difference by reading this guide.

The Slide transition is used by the Drawer component. It uses react-transition-group internally.


Name Type Default Description
children element A single child content element.
āš ļø Needs to be able to hold a ref.
direction 'down'
| 'left'
| 'right'
| 'up'
'down' Direction the child node will enter from.
in bool If true, show the component; triggers the enter or exit animation.
timeout number
| { appear?: number, enter?: number, exit?: number }
{ enter: duration.enteringScreen, exit: duration.leavingScreen,} The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (Transition).


The props of the Transition component, from react-transition-group, are also available. You can take advantage of this behavior to target nested components.