Slide

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

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

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>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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

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

import { Slide } from "@workspaces/ui"

<Slide />

配置を変更する

配置を変更する場合は、placementに"block-start"、"block-end"、"inline-start"、または"inline-end"を設定します。デフォルトでは、"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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

アニメーション時間を変更する

アニメーション時間を変更する場合は、durationに数値（秒単位）を設定します。デフォルトは{ 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>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

非表示時にアンマウントする

コンポーネントが表示されていないときにアンマウントする場合は、unmountOnExitを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>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

遅延させる

アニメーションを遅延させる場合は、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>
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`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.

類似のコンポーネント

Collapseは、要素を展開または折りたたんで表示するコンポーネントです。

Fadeは、要素を次第に表示または非表示にするコンポーネントです。

FadeScaleは、要素を次第に拡大して表示または縮小して非表示にするコンポーネントです。

SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。

Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。

Airyは、２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。

Drawerは、画面の端から表示されるパネルのコンポーネントです。

Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。

使用しているコンポーネント・フック

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

使用されているコンポーネント・フック

Drawerは、画面の端から表示されるパネルのコンポーネントです。