SlideFade

SlideFade is a component that gradually shows or hides an element while moving it from a specified position.

Import

import { SlideFade } from "@yamada-ui/react"

Copied!

Usage

To control the visibility, set isOpen.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <SlideFade isOpen={isOpen}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </SlideFade>
  </>
)

Copied!

Change the Duration

To change the duration, set a number (in seconds) to duration.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <SlideFade isOpen={isOpen} duration={0.4}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </SlideFade>
  </>
)

Copied!

Change the Position

To change the position where the element becomes visible or hidden, specify a string or number for offsetX and offsetY.

offsetX: Specifies the horizontal direction. By default, 0 is set.
offsetY: Specifies the vertical direction. By default, 8 is set.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <SlideFade isOpen={isOpen} offsetX={20} offsetY={0}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </SlideFade>
  </>
)

Copied!

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <SlideFade isOpen={isOpen} offsetY={-20}>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </SlideFade>
  </>
)

Copied!

Unmount on Exit

To unmount the component when it is not visible, set unmountOnExit to true.

Editable example

const { isOpen, onToggle } = useDisclosure()

return (
  <>
    <Button onClick={onToggle}>Please Click</Button>

    <SlideFade isOpen={isOpen} unmountOnExit>
      <Box w="full" bg="orange.500" rounded="md" p="md" color="white" mt="md">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </SlideFade>
  </>
)

Copied!

Edit this page on GitHub

PreviousSlide NextOther