Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Stack

Stackは、要素をグループ化し、子要素間にスペースを設けるコンポーネントです。

ソース@yamada-ui/layouts

インポート

import { Stack, VStack, HStack, ZStack } from "@yamada-ui/react"
Copied!
  • Stackは、子要素を垂直または水平方向にスタックするために使用されます。
  • VStackは、子要素を垂直方向にスタックするために使用されます。
  • HStackは、子要素を水平方向にスタックするために使用されます。
  • ZStackは、子要素を奥行き方向にスタックするために使用されます。

使い方

編集可能な例

<Stack direction={{ base: "column", lg: "row" }}>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</Stack>
Copied!

垂直方向・水平方向へスタックさせる

編集可能な例

<VStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</VStack>
Copied!

編集可能な例

<HStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</HStack>
Copied!

子要素間に区切り線を設ける

編集可能な例

<VStack divider={<Divider />}>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</VStack>
Copied!

Spacerを使う

編集可能な例

<HStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Spacer />

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</HStack>
Copied!

奥行き方向へスタックさせる

編集可能な例

<ZStack>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</ZStack>
Copied!

方向を変更する

方向を変更する場合は、directionにtop, bottom-rightなどを設定します。

編集可能な例

<VStack>
  <ZStack direction="top">
    <Box p="md" rounded="4" bg="primary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="secondary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="warning" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="danger" color="white">
      Box
    </Box>
  </ZStack>

  <ZStack direction="bottom-right">
    <Box p="md" rounded="4" bg="primary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="secondary" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="warning" color="white">
      Box
    </Box>

    <Box p="md" rounded="4" bg="danger" color="white">
      Box
    </Box>
  </ZStack>
</VStack>
Copied!

方向を反転させる

方向を反転させる場合は、reverseをtrueに設定します。

編集可能な例

<ZStack direction="left" reverse>
  <Box p="md" rounded="4" bg="primary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="secondary" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="warning" color="white">
    Box
  </Box>

  <Box p="md" rounded="4" bg="danger" color="white">
    Box
  </Box>
</ZStack>
Copied!

GitHubでこのページを編集する

前Box次Container