Slide Fade

Source

The SlideFade component is a utility in the Pearl UI library that provides a view with a sliding fade transition. It can be used to hide and show content based on a boolean prop show.

Import#

import { SlideFade } from "pearl-ui";

Usage#

The SlideFade component can be used to hide and show content based on a boolean prop show. Here is a basic usage example:

<SlideFade show={isOpen}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></SlideFade>

Changing the offsets#

The SlideFade component allows you to change the offset of the slide transition by using the offsetX and offsetY props.

<SlideFade show={isOpen} offsetX={10} offsetY={20}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></SlideFade>

Changing transitions manually#

You can manually change the transitions of the SlideFade component by using the transition and exitTransition props. These props accept an object that defines the type, duration, and easing of the transition.

<SlideFade  show={isOpen}  offsetX={10}  offsetY={20}  transition={{ duration: 200 }}  exitTransition={{ duration: 0 }}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></SlideFade>

Example#

Embed not loading? Click here

Component Properties#

Supported Style Properties#

The SlideFade component composes the Box component, so you can pass all Box related props to it.

Additional Properties#

The SlideFade component also accepts the following additional props:

Name	Required	Type	Default	Description
`show`	Yes	boolean		If `true`, the content will be visible.
`offsetX`	No	number	`0`	The offset on the horizontal axis.
`offsetY`	No	number	`10`	The offset on the vertical axis.