Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Flex

Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

ソース@yamada-ui/layouts

インポート

import { Flex } from "@yamada-ui/react"
Copied!

使い方

Flexに用意されているショートハンドは下記の通りです。

  • direction: flexDirectionを短縮したpropsです。
  • wrap: flexWrapを短縮したpropsです。
  • basis: flexBasisを短縮したpropsです。
  • grow: flexGrowを短縮したpropsです。
  • shrink: flexShrinkを短縮したpropsです。
  • align: alignItemsを短縮したpropsです。
  • justify: justifyContentを短縮したpropsです。

編集可能な例

<Flex gap="md">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</Flex>
Copied!

Spacerを使う

編集可能な例

<Flex w="full" gap="md">
  <For each={["primary", "secondary"]}>
    {(bg, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>

  <Spacer />

  <For each={["warning", "danger"]}>
    {({ p, rounded, bg, color }, index) => (
      <Box key={index} p="md" rounded="4" bg={bg} color="white">
        Box
      </Box>
    )}
  </For>
</Flex>
Copied!

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

前Container次Wrap