FadeScale
FadeScale is a component that gradually scales up to reveal or scales down to hide an element.
その打球、消えるよ
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>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { FadeScale } from "@yamada-ui/react"
import { FadeScale } from "@/components/ui"
import { FadeScale } from "@workspaces/ui"
<FadeScale />
Change the initial scale value
To change the initial scale value, set a number to scale. The element will scale based on this value, starting from and shrinking to it. The default is 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>
)
If you use this code, you need to add
"use client" to the top of the file.Change the Duration
To change the duration, set a number (in seconds) to 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>
)
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 (
<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>
)
If you use this code, you need to add
"use client" to the top of the file.