Slide

Slide is a component that shows or hides an element from the corners of the page.

Import

import { Slide } 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>

    <Slide isOpen={isOpen} placement="bottom">
      <VStack w="full" bg="orange.500" p="md">
        <Text color="white">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button onClick={onToggle} alignSelf="flex-end">
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)

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>

    <Slide isOpen={isOpen} placement="bottom" duration={0.7}>
      <VStack w="full" bg="orange.500" p="md">
        <Text color="white">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button onClick={onToggle} alignSelf="flex-end">
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)

Copied!

Change the Placement

To change the placement, set placement to top, right, bottom, or left. By default, right is set.

Editable example

const { isOpen, onToggle } = useDisclosure()

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

    <Slide isOpen={isOpen} placement="left" zIndex="sonGoku">
      <VStack w="full" bg="orange.500" p="md">
        <Text color="white">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button onClick={onToggle} alignSelf="flex-end">
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)

Copied!

Edit this page on GitHub

PreviousScaleFade NextSlideFade