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
類似のコンポーネント
ZStack
ZStackは、子要素を奥行き方向にスタックするために使用されます。
VStack
VStackは、子要素を垂直方向にスタックするために使用されます。
Wrap
Wrapは、Flexにwrapを設定したコンポーネントです。Flexから便利なスタイルのショートハンドを継承しています。
Stack
Stackは、要素をグループ化し、子要素間にスペースを設けるコンポーネントです。
Spacer
Spacerは、要素間に空間を追加するために使用するコンポーネントです。
SimpleGrid
SimpleGridは、Gridをより使いやすくシンプルにしたコンポーネントです。
Separator
Separatorは、要素間において区切りを表すコンポーネントです。
Group
Groupは、複数の要素をまとめて扱うためのコンポーネントです。