Slide

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

クリリンのことか……クリリンのことかーーーっ！！！！！

const [open, { toggle }] = useBoolean()

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

    <Slide open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

import { Slide } from "@/components/ui"

import { Slide } from "@workspaces/ui"

<Slide />

Change Placement

To change the placement, set placement to "block-start", "block-end", "inline-start", or "inline-end". Default is "inline-end".

クリリンのことか……クリリンのことかーーーっ！！！！！

const placements = ["block-start", "block-end", "inline-start", "inline-end"]
const [placement, setPlacement] = useState("inline-end")
const [open, { toggle }] = useBoolean()

return (
  <VStack>
    <Wrap gap="md">
      {placements.map((value) => (
        <Button
          key={value}
          onClick={() => setPlacement(value)}
          variant={placement === value ? "solid" : "outline"}
        >
          {value}
        </Button>
      ))}
    </Wrap>

    <Button onClick={toggle} alignSelf="flex-start">
      Please Click
    </Button>

    <Portal>
      <Slide open={open} placement={placement}>
        <VStack
          bg="bg.panel"
          h={placement.startsWith("inline") ? "full" : undefined}
          p="md"
          w={placement.startsWith("block") ? "full" : undefined}
        >
          <Text color="bg.contrast">
            クリリンのことか……クリリンのことかーーーっ！！！！！
          </Text>

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

If you use this code, you need to add "use client" to the top of the file.

Change Duration

To change the duration, set a number (in seconds) to duration. Default is { enter: 0.4, exit: 0.3 }.

クリリンのことか……クリリンのことかーーーっ！！！！！

const [open, { toggle }] = useBoolean()

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

    <Slide duration={0.7} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

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

If you use this code, you need to add "use client" to the top of the file.

Unmount on Exit

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

const [open, { toggle }] = useBoolean()

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

    <Slide open={open} placement="block-end" unmountOnExit>
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

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

If you use this code, you need to add "use client" to the top of the file.

Delay

If you want to delay the switch, set a numerical value (seconds) to delay.

クリリンのことか……クリリンのことかーーーっ！！！！！

const [open, { toggle }] = useBoolean()

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

    <Slide delay={0.3} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

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

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`enter`	-	`any` Custom `enter`.
`exit`	-	`any` Custom `exit`. A target to animate to when this component is removed from the tree. This component must be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
`initial`	-	`any` Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)
`delay`	`0`	`MotionLifecycleProps<number> \| number` Custom `delay` definition for `enter` and `exit`.
`duration`	`0.2`	`MotionLifecycleProps<number> \| number` Custom `duration` definition for `enter` and `exit`.
`open`	-	`boolean` Show the component. triggers when enter or exit states.
`transition`	-	`MotionLifecycleProps<Transition>` Custom `transition` definition for `enter` and `exit`.
`transitionEnd`	-	`MotionLifecycleProps<ResolvedValues>` Custom `transitionEnd` definition for `enter` and `exit`.
`unmountOnExit`	-	`boolean` If `true`, the element will unmount when `open={false}` and animation is done.

Similar Components

Collapse is a component that allows you to expand or collapse an element for display.

Fade is a component that gradually shows or hides an element.

FadeScale is a component that gradually scales up to reveal or scales down to hide an element.

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

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Airy is a component that provides a smooth animation to switch between two elements.

Drawer is a component for a panel that appears from the edge of the screen.

Flip is a component that provides an animation to switch between two elements while flipping.

Uses Components & Hooks

Motion is a convenient component that extends the Yamada UI Style Props to Motion.

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.