Group

Group (그룹 배치)

Group 컴포넌트는 요소들을 가로(수평) flex 컨테이너로 배치하는 컴포넌트예요. 세로 배치가 필요하면 Stack, flex 속성을 더 세밀히 제어해야 한다면 Flex를 사용해요.

출처: 문서

본문

Group은 가로 flex 컨테이너예요. 세로 flex 컨테이너가 필요하면 Stack 컴포넌트를 사용해요. flex 컨테이너 속성을 완전히 제어해야 한다면 Flex 컴포넌트를 사용해요.

import { Group, Button } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <Button variant="default">First</Button>
      <Button variant="default">Second</Button>
      <Button variant="default">Third</Button>
    </Group>
  );
}

preventGrowOverflow

preventGrowOverflow prop으로 한 줄에 모두 들어갈 공간이 부족할 때 Group 자식이 동작하는 방식을 제어할 수 있어요. 기본적으로 자식은 부모 너비의 (1 / children.length) * 100%보다 더 넓어질 수 없어요(preventGrowOverflow가 true). 이 동작을 바꾸려면 preventGrowOverflow를 false로 설정하면 자식이 필요에 따라 자라서 필요한 만큼 공간을 차지할 수 있어요.

import { Group, Button, Box, Text } from '@mantine/core';

function Demo() {
  return (
    <Box style={{ overflow: 'hidden' }}>
      <Box maw={500} p="md" mx="auto" bg="var(--mantine-color-blue-light)">
        <Text size="sm" mb={5}>
          preventGrowOverflow: true – each child width is always limited to 33% of parent width
          (since there are 3 children)
        </Text>

        <Group grow wrap="nowrap">
          <Button variant="default">First button</Button>
          <Button variant="default">Second button with large content</Button>
          <Button variant="default">Third button</Button>
        </Group>

        <Text size="sm" mb={5} mt="md">
          preventGrowOverflow: false – children will grow based on their content, they can take more
          than 33% of parent width
        </Text>

        <Group grow preventGrowOverflow={false} wrap="nowrap">
          <Button variant="default">First button</Button>
          <Button variant="default">Second button with large content</Button>
          <Button variant="default">Third button</Button>
        </Group>
      </Box>
    </Box>
  );
}

Group children

!important Group은 React 요소와만 올바르게 동작해요. 문자열, 숫자, fragment는 grow prop이 설정되면 잘못된 스타일을 가질 수 있어요.

// Invalid Group usage, do not do this
import { Group } from '@mantine/core';

function InvalidDemo() {
  return (
    <Group grow>
      First string
      <>
      </>
      {20}
    </Group>
  );
}

브라우저 지원

Group은 flexbox gap을 사용해 자식 사이의 간격을 만들어요. 오래된 브라우저에서는 Group 자식 사이의 간격이 적용되지 않을 수 있어요. PostCSS flex-gap-polyfill을 설치하면 오래된 브라우저 지원을 추가할 수 있어요.

더 알아보기 (Learn more)

• Stack — 세로 배치 컴포넌트
• Flex — flex 속성을 완전히 제어하는 컴포넌트