ZStack
ZStackは、子要素を奥行き方向にスタックするために使用されます。
Box
Box
Box
Box
<ZStack>
{["info", "success", "warning", "error"].map((bg, index) => (
<Box key={index} bg={bg} color="white" p="md">
Box
</Box>
))}
</ZStack>
使い方
import { ZStack } from "@yamada-ui/react"
import { ZStack } from "@/components/ui"
import { ZStack } from "@workspaces/ui"
<ZStack />
方向を変更する
方向を変更する場合は、directionに"start", "end-end"などを設定します。
Box
Box
Box
Box
<ZStack direction="start">
{["info", "success", "warning", "error"].map((bg, index) => (
<Box key={index} bg={bg} color="white" p="md">
Box
</Box>
))}
</ZStack>
方向を反転させる
方向を反転させる場合は、reverseをtrueに設定します。
Box
Box
Box
Box
<ZStack direction="center-start" reverse>
{["info", "success", "warning", "error"].map((bg, index) => (
<Box key={index} bg={bg} color="white" p="md">
Box
</Box>
))}
</ZStack>