Box

Boxは、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、div要素をレンダリングします。

This is the Box

<Box p="md" bg="bg.contrast" color="fg.contrast">
  This is the Box
</Box>

使い方

import { Box } from "@yamada-ui/react"

import { Box } from "@/components/ui"

import { Box } from "@workspaces/ui"

<Box />

asを渡すことで、異なる要素としてレンダリングすることができます。

This is the section

<Box as="section" p="md" bg="bg.contrast" color="fg.contrast">
  This is the section
</Box>

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ZStackは、子要素を奥行き方向にスタックするために使用されます。

VStackは、子要素を垂直方向にスタックするために使用されます。

Wrapは、Flexにwrapを設定したコンポーネントです。Flexから便利なスタイルのショートハンドを継承しています。

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

Spacerは、要素間に空間を追加するために使用するコンポーネントです。

SimpleGridは、Gridをより使いやすくシンプルにしたコンポーネントです。

Separatorは、要素間において区切りを表すコンポーネントです。

Groupは、複数の要素をまとめて扱うためのコンポーネントです。