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 />

Boxは、汎用的なコンテナです。特定のセマンティクスやレイアウトを持たないため、他のコンポーネントでは対応できないスタイリングが必要な場合に使用します。

Yamada UIは、セマンティックなコンポーネントを多く提供しています。まずはそれらのコンポーネントで対応できないか検討し、どうしても対応できない場合の最終手段としてBoxを使用してください。

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.

Bleedは、要素をコンテナの境界から外すために使用されるコンポーネントです。

Centerは、コンポーネント内の子要素を中央に配置するコンポーネントです。

Containerは、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、section要素をレンダリングします。

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

Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。

Gridは、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

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

HStackは、子要素を水平方向にスタックするために使用されます。