Fade
Fade is a component that gradually shows or hides an element.
その打球、消えるよ
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>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { Fade } from "@yamada-ui/react"
import { Fade } from "@/components/ui"
import { Fade } from "@workspaces/ui"
<Fade />
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>
<Fade open={open} duration={0.4} borderWidth={1} p="md" rounded="l2">
その打球、消えるよ
</Fade>
</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>
<Fade open={open} unmountOnExit borderWidth={1} p="md" rounded="l2">
その打球、消えるよ
</Fade>
<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.