Advanced

Slide Y

Allows to hide and show content using a vertical expand animation.
View source
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