Slide
Slideは、要素をページの隅から表示または非表示にするコンポーネントです。
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>
</>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。使い方
import { Slide } from "@yamada-ui/react"
import { Slide } from "@/components/ui"
import { Slide } from "@workspaces/ui"
<Slide />
表示位置を変更する
表示位置を変更する場合は、placementに"block-start"、"block-end"、"inline-start"、または"inline-end"を設定します。デフォルトでは、"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>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。アニメーション時間を変更する
アニメーション時間を変更する場合は、durationに数値（秒単位）を設定します。デフォルトは{ 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>
</>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。非表示時にアンマウントする
コンポーネントが表示されていないときにアンマウントする場合は、unmountOnExitを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>
</>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。遅延させる
アニメーションを遅延させる場合は、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>
</>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。