Box

基本的なレイアウト構成要素。

ソースを表示問題を報告

<Box width="64px" height="64px">
  <DecorativeBox />
</Box>

APIリファレンス

このコンポーネントはdiv要素に基づいており、共通のマージンプロパティをサポートします。

displayプロパティの値のみが、Boxコンポーネントに固有です。

プロパティ	型	デフォルト
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	デフォルト値なし
`display`	`レスポンシブ<"none" \| "inline" \| "inline-block" \| "block">`	デフォルト値なし

以下のプロパティは、Box、Flex、Grid、Container、Sectionコンポーネントで共有されています。レイアウトのコンポーネントの詳細をご覧ください。

プロパティ	型	デフォルト
`p`	`レスポンシブ<enum \| string>`	デフォルト値なし
`px`	`レスポンシブ<enum \| string>`	デフォルト値なし
`py`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pt`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pr`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pb`	`レスポンシブ<enum \| string>`	デフォルト値なし
`pl`	`レスポンシブ<enum \| string>`	デフォルト値なし
`width`	`レスポンシブ<string>`	デフォルト値なし
`minWidth`	`レスポンシブ<string>`	デフォルト値なし
`maxWidth`	`レスポンシブ<string>`	デフォルト値なし
`height`	`レスポンシブ<string>`	デフォルト値なし
`minHeight`	`レスポンシブ<string>`	デフォルト値なし
`maxHeight`	`レスポンシブ<string>`	デフォルト値なし
`position`	`レスポンシブ<enum>`	デフォルト値なし
`inset`	`レスポンシブ<enum \| string>`	デフォルト値なし
`top`	`レスポンシブ<enum \| string>`	デフォルト値なし
`right`	`レスポンシブ<enum \| string>`	デフォルト値なし
`bottom`	`レスポンシブ<enum \| string>`	デフォルト値なし
`left`	`レスポンシブ<enum \| string>`	デフォルト値なし
`overflow`	`レスポンシブ<enum>`	デフォルト値なし
`overflowX`	`レスポンシブ<enum>`	デフォルト値なし
`overflowY`	`レスポンシブ<enum>`	デフォルト値なし
`flexBasis`	`レスポンシブ<string>`	デフォルト値なし
`flexShrink`	`レスポンシブ<enum \| string>`	デフォルト値なし
`flexGrow`	`レスポンシブ<enum \| string>`	デフォルト値なし
`gridArea`	`レスポンシブ<string>`	デフォルト値なし
`gridColumn`	`レスポンシブ<string>`	デフォルト値なし
`gridColumnStart`	`レスポンシブ<string>`	デフォルト値なし
`gridColumnEnd`	`レスポンシブ<string>`	デフォルト値なし
`gridRow`	`レスポンシブ<string>`	デフォルト値なし
`gridRowStart`	`レスポンシブ<string>`	デフォルト値なし
`gridRowEnd`	`レスポンシブ<string>`	デフォルト値なし

前へカーソル

次へFlex

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

Box

APIリファレンス