Stack

Stack

요소와 컴포넌트를 세로 방향의 flex 컨테이너 안에 쌓아 배치하는 컴포넌트예요. 수평 방향이 필요하면 Group을, flex 속성을 완전히 제어하고 싶다면 Flex를 사용해요.

출처: 문서

본문

사용법 (Usage)

Stack은 세로 방향의 flex 컨테이너예요. 수평 방향의 flex 컨테이너가 필요하면 Group 컴포넌트를 대신 사용해요. flex 컨테이너 속성을 완전히 제어하고 싶으면 Flex 컴포넌트를 사용해요.

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

function Demo() {
  return (
    <Stack>
      {/* 자식 요소들이 세로로 배치돼요 */}
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Stack>
  );
}

브라우저 지원 (Browser support)

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

더 알아보기 (Learn more)

• Group
• Flex
• Box