Group
Groupは、複数の要素をまとめて扱うためのコンポーネントです。
<Group>
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
使い方
import { Group } from "@yamada-ui/react"
import { Group } from "@/components/ui"
import { Group } from "@workspaces/ui"
<Group />
方向を変更する
方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトでは、"horizontal"が設定されています。
<VStack alignItems="flex-start">
<Group>
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
<Group orientation="vertical">
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
</VStack>
子要素を引き延ばす
子要素を横幅いっぱいに引き延ばす場合は、growをtrueに設定します。
<Group grow w="full">
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Group>
子要素を連結する
子要素を連結する場合は、attachedをtrueに設定します。
@yamada-ui/react10k+
<VStack alignItems="flex-start">
<Group attached>
<Input />
<IconButton
variant="surface"
aria-label="Add"
focusVisibleRing="inside"
icon={<PlusIcon fontSize="xl" />}
/>
</Group>
<Group attached>
<Tag colorScheme="gray" variant="solid">
@yamada-ui/react
</Tag>
<Tag colorScheme="lime" variant="solid">
10k+
</Tag>
</Group>
<Group attached orientation="vertical">
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
<Button variant="outline" focusVisibleRing="inside">
Button
</Button>
</Group>
</VStack>