Container
Containerは、汎用的な区分要素として使用するコンポーネントです。デフォルトでは、section要素をレンダリングします。
『ドラゴンボール』（DRAGON BALL）
『ドラゴンボール』（DRAGON BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
<Container.Root>
<Container.Header>
<Heading size="xl">『ドラゴンボール』（DRAGON BALL）</Heading>
</Container.Header>
<Container.Body color="fg.muted">
<Text>
『ドラゴンボール』（DRAGON
BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
</Text>
</Container.Body>
</Container.Root>
使い方
import { Container } from "@yamada-ui/react"
import { Container } from "@/components/ui"
import { Container } from "@workspaces/ui"
<Container.Root>
<Container.Header />
<Container.Body />
<Container.Footer />
</Container.Root>
バリアントを変更する
Container
Variant is panel
Container
Variant is elevated
Container
Variant is subtle
Container
Variant is solid
Container
Variant is surface
Container
Variant is outline
<VStack>
<For each={["panel", "elevated", "subtle", "solid", "surface", "outline"]}>
{(variant, index) => (
<Container.Root variant={variant} key={index}>
<Container.Header>
<Heading size="md">Container</Heading>
</Container.Header>
<Container.Body>
<Text>Variant is {variant}</Text>
</Container.Body>
</Container.Root>
)}
</For>
</VStack>
サイズを変更する
Container
Size is sm
Container
Size is md
Container
Size is lg
Container
Size is xl
<VStack>
<For each={["sm", "md", "lg", "xl"]}>
{(size, index) => (
<Container.Root size={size} key={index}>
<Container.Header>
<Heading size={transformSize(size, 2)}>Container</Heading>
</Container.Header>
<Container.Body color="fg.muted">
<Text>Size is {size}</Text>
</Container.Body>
</Container.Root>
)}
</For>
</VStack>
カラースキームを変更する
Container
ColorScheme is info
Container
ColorScheme is success
Container
ColorScheme is warning
Container
ColorScheme is error
<VStack>
<For each={["info", "success", "warning", "error"]}>
{(colorScheme, index) => (
<Container.Root colorScheme={colorScheme} variant="solid" key={index}>
<Container.Header>
<Heading size="md">Container</Heading>
</Container.Header>
<Container.Body>
<Text>ColorScheme is {colorScheme}</Text>
</Container.Body>
</Container.Root>
)}
</For>
</VStack>
子要素を中央寄せにする
『ドラゴンボール』（DRAGON BALL）
『ドラゴンボール』（DRAGON BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
<Container.Root centerContent>
<Container.Header flexDirection="column">
<Image
src="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
alt="ドラゴンボール"
maxW="sm"
/>
<Heading size="xl">『ドラゴンボール』（DRAGON BALL）</Heading>
</Container.Header>
<Container.Body color="fg.muted">
<Text>
『ドラゴンボール』（DRAGON
BALL）は、鳥山明による日本の漫画作品。『週刊少年ジャンプ』（集英社）にて1984年51号から1995年25号まで連載された。世界中に散らばった七つの球をすべて集めると、どんな願いも一つだけ叶えられるという秘宝・ドラゴンボールと、主人公・孫悟空（そん・ごくう）を中心に展開する、「冒険」「夢」「バトル」「友情」などを描いた長編漫画。
</Text>
</Container.Body>
</Container.Root>
Props
類似のコンポーネント
Bleed
Bleedは、要素をコンテナの境界から外すために使用されるコンポーネントです。
Box
Boxは、他のすべてのコンポーネントがその上に構築される最も抽象的なコンポーネントです。デフォルトでは、div要素をレンダリングします。
Center
Centerは、コンポーネント内の子要素を中央に配置するコンポーネントです。
Flex
Flexは、Boxにflexを設定したコンポーネントです。また、便利なスタイルのショートハンドが用意されています。
Float
Floatは、要素をコンテナの端に固定するために使用されるコンポーネントです。
Grid
Gridは、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。
Group
Groupは、複数の要素をまとめて扱うためのコンポーネントです。
HStack
HStackは、子要素を水平方向にスタックするために使用されます。