1
2
import { Group } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Group>
<DecorativeBox h="20" w="40">
1
</DecorativeBox>
<DecorativeBox h="20" w="40">
2
</DecorativeBox>
</Group>
)
}
用法
import { Group } from "@chakra-ui/react"<Group>
<div />
<div />
</Group>示例
按钮
这是一个使用 Group 组件将按钮分组的示例。
import { Button, Group } from "@chakra-ui/react"
const Demo = () => {
return (
<Group>
<Button variant="outline">Item 1</Button>
<Button variant="outline">Item 2</Button>
</Group>
)
}
附加
使用 attached 属性将子元素连接在一起。
提交状态90+
import { Badge, Button, Group, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4">
<Group attached>
<Button variant="outline">Item 1</Button>
<Button variant="outline">Item 2</Button>
</Group>
<Group attached>
<Badge variant="solid" colorPalette="purple">
Commit status
</Badge>
<Badge variant="solid" colorPalette="green">
90+
</Badge>
</Group>
</Stack>
)
}
注意： 当组合自定义组件并将其附加到 Group 时，请确保转发属性。
export const Demo = () => {
return (
<Group attached>
<FocusButton />
<IconButton variant="outline">Two</IconButton>
</Group>
)
}
function FocusButton(props: ButtonProps) {
return (
<IconButton variant="outline" {...props}>
<LuFocus />
</IconButton>
)
}填充
使用 grow 属性使子元素填充可用空间。
import { Button, Group } from "@chakra-ui/react"
const Demo = () => {
return (
<Group grow>
<Button variant="outline">First</Button>
<Button variant="outline">Second</Button>
<Button variant="outline">Third</Button>
</Group>
)
}