Slide
Slide is a component that shows or hides an element from the corners of the page.
const [open, { toggle }] = useBoolean()
return (
<>
<Button onClick={toggle}>Please Click</Button>
<Slide open={open} placement="block-end">
<VStack bg="bg.panel" p="md" w="full">
<Text color="bg.contrast">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Text>
<Button alignSelf="flex-end" onClick={toggle}>
Close
</Button>
</VStack>
</Slide>
</>
)
If you use this code, you need to add
"use client" to the top of the file.Usage
import { Slide } from "@yamada-ui/react"
import { Slide } from "@/components/ui"
import { Slide } from "@workspaces/ui"
<Slide />
Change Placement
To change the placement, set placement to "block-start", "block-end", "inline-start", or "inline-end". Default is "inline-end".
const placements = ["block-start", "block-end", "inline-start", "inline-end"]
const [placement, setPlacement] = useState("inline-end")
const [open, { toggle }] = useBoolean()
return (
<VStack>
<Wrap gap="md">
{placements.map((value) => (
<Button
key={value}
onClick={() => setPlacement(value)}
variant={placement === value ? "solid" : "outline"}
>
{value}
</Button>
))}
</Wrap>
<Button onClick={toggle} alignSelf="flex-start">
Please Click
</Button>
<Portal>
<Slide open={open} placement={placement}>
<VStack
bg="bg.panel"
h={placement.startsWith("inline") ? "full" : undefined}
p="md"
w={placement.startsWith("block") ? "full" : undefined}
>
<Text color="bg.contrast">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Text>
<Button alignSelf="flex-end" onClick={toggle}>
Close
</Button>
</VStack>
</Slide>
</Portal>
</VStack>
)
If you use this code, you need to add
"use client" to the top of the file.Change Duration
To change the duration, set a number (in seconds) to duration. Default is { enter: 0.4, exit: 0.3 }.
const [open, { toggle }] = useBoolean()
return (
<>
<Button onClick={toggle}>Please Click</Button>
<Slide duration={0.7} open={open} placement="block-end">
<VStack bg="bg.panel" p="md" w="full">
<Text color="bg.contrast">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Text>
<Button alignSelf="flex-end" onClick={toggle}>
Close
</Button>
</VStack>
</Slide>
</>
)
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 (
<>
<Button onClick={toggle}>Please Click</Button>
<Slide open={open} placement="block-end" unmountOnExit>
<VStack bg="bg.panel" p="md" w="full">
<Text color="bg.contrast">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Text>
<Button alignSelf="flex-end" onClick={toggle}>
Close
</Button>
</VStack>
</Slide>
</>
)
If you use this code, you need to add
"use client" to the top of the file.Delay
If you want to delay the switch, set a numerical value (seconds) to delay.
const [open, { toggle }] = useBoolean()
return (
<>
<Button onClick={toggle}>Please Click</Button>
<Slide delay={0.3} open={open} placement="block-end">
<VStack bg="bg.panel" p="md" w="full">
<Text color="bg.contrast">
クリリンのことか……クリリンのことかーーーっ！！！！！
</Text>
<Button alignSelf="flex-end" onClick={toggle}>
Close
</Button>
</VStack>
</Slide>
</>
)
If you use this code, you need to add
"use client" to the top of the file.