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>
)
}
用法
¥Usage
import { Group } from "@chakra-ui/react"<Group>
<div />
<div />
</Group>示例
¥Examples
按钮
¥Button
以下是使用 Group 组件将按钮组合在一起的示例。
¥Here's an example of using the Group component to group buttons together.
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
使用 attached 属性将子元素连接在一起。
¥Use the attached prop to attach the children together.
Commit status90+
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 时，请确保转发 props。
¥Note: When composing custom components and attaching them to a Group,
ensure you forward props.
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
使用 grow 属性使子元素增长以填充可用空间。
¥Use the grow prop to make the children grow to fill the available space.
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>
)
}
属性
¥Props
| Prop | Default | Type |
|---|---|---|
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |