Group
Group (그룹)
요소들을 하나로 묶고 서로 붙일 때 사용하는 컴포넌트예요. 버튼 그룹처럼 인접한 요소들을 시각적으로 묶을 때 유용해요.
출처: 문서
본문
사용법 (Usage)
import { Group } from "@chakra-ui/react"
<Group>
<div />
<div />
</Group>
예제 (Examples)
버튼 (Button)
Group 컴포넌트를 사용해서 버튼들을 함께 묶는 예시예요.
| 예제 (group-with-button) |
붙이기 (Attached)
attached prop을 사용해서 자식 요소들을 서로 붙일 수 있어요.
| 예제 (group-with-attached) |
참고: 커스텀 컴포넌트를 조합해서 Group에 붙일 때는 props를 전달하도록(forward) 해 주세요.
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 prop을 사용해서 자식 요소들이 사용 가능한 공간을 채우도록 확장할 수 있어요.
| 예제 (group-with-grow) |
Props
| PropTable (Group / Group) |