Advanced

Slide Y

Allows to hide and show content using a vertical expand animation.
1
import {Button, SlideY} from '@coveord/plasma-react';
2
import {loremIpsum} from 'lorem-ipsum';
3
import {useState} from 'react';
4
5
const content = loremIpsum({count: 20});
6
7
const Demo = () => {
8
const [opened, setOpened] = useState(false);
9
return (
10
<>
11
<Button onClick={() => setOpened(!opened)}>{opened ? 'Close' : 'Open'}</Button>
12
<SlideY in={opened}>
13
<div className="mt2">{content}</div>
14
</SlideY>
15
</>
16
);
17
};
18
export default Demo;

Props

NameTypeDefaultDescription
childrenReactNode
durationnumber200
Duration of the animation in milliseconds
idstring
inbooleanfalse
Whether the slider should be expanded
timeoutnumber | { enter?: number; exit?: number; }200
Delay in milliseconds before the animation starts when the "in" prop value changes

No guidelines exist for SlideY yet.

Create guidelines