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