SlideFade
SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} borderWidth="1px" p="md" rounded="l2">
クラスは最低じゃないぞ！メンバーが最低なだけだ！
</SlideFade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { SlideFade } from "@yamada-ui/react"
import { SlideFade } from "@/components/ui"
import { SlideFade } from "@workspaces/ui"
<SlideFade />
所要時間を変更する
所要時間を変更するには、durationに数値（秒）を設定します。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} duration={0.4} borderWidth="1px" p="md" rounded="l2">
確かにアイツは勉強ができない。でもな、学力が低いからといって、全てが決まるわけじゃないだろう？
</SlideFade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。位置を変更する
位置を変更するには、offsetXまたはoffsetYに文字列または数値を指定します。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade
open={open}
offsetX={8}
offsetY={0}
borderWidth="1px"
p="md"
rounded="l2"
>
……私、このクラスの皆が好きなんです。人の為に一生懸命な皆のいる、Fクラスが
</SlideFade>
<SlideFade open={open} offsetY={-8} borderWidth="1px" p="md" rounded="l2">
……女は胸じゃないのに。アキの、バカ……
</SlideFade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} unmountOnExit borderWidth="1px" p="md" rounded="l2">
考えすぎではないかのぅ。メイド服くらい人間一度は着るものじゃ
</SlideFade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。遅延させる
遅延させる場合は、delayに数値（秒）を設定します。
const [open, { toggle }] = useBoolean()
return (
<VStack alignItems="flex-start">
<Button onClick={toggle}>Please Click</Button>
<SlideFade open={open} delay={0.5} borderWidth="1px" p="md" rounded="l2">
たとえ許されない行為であろうとも自分の気持ちは偽れない。正直に言おう、今僕は…純粋に欲望のために女子風呂を覗きたいッ！！
</SlideFade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。