Fade
Fadeは、要素を次第に表示または非表示にするコンポーネントです。
その打球、消えるよ
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start">
<Button onClick={toggle}>Please Click</Button>
<Fade open={open} borderWidth={1} p="md" rounded="l2">
その打球、消えるよ
</Fade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { Fade } from "@yamada-ui/react"
import { Fade } from "@/components/ui"
import { Fade } from "@workspaces/ui"
<Fade />
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
その打球、消えるよ
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start">
<Button onClick={toggle}>Please Click</Button>
<Fade open={open} duration={0.4} borderWidth={1} p="md" rounded="l2">
その打球、消えるよ
</Fade>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。非表示時にアンマウントする
非表示時にアンマウントする場合は、unmountOnExitをtrueに設定します。
俺はたった今からデータを捨てる！そして俺は過去を凌駕する！
const [open, { toggle }] = useBoolean()
return (
<VStack align="flex-start">
<Button onClick={toggle}>Please Click</Button>
<Fade open={open} unmountOnExit borderWidth={1} p="md" rounded="l2">
その打球、消えるよ
</Fade>
<Box borderWidth={1} p="md" rounded="l2" w="full">
俺はたった今からデータを捨てる！そして俺は過去を凌駕する！
</Box>
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。