BackgroundImage
BackgroundImage
이미지를 배경으로 표시하는 컴포넌트예요. 다형성(polymorphic) 컴포넌트로, 기본 루트 요소는 div예요. 히어로 헤더 같은 섹션에 이미지 위에 콘텐츠를 올릴 때 사용해요.
출처: 문서
본문
Usage
BackgroundImage 컴포넌트는 이미지 위에 어떤 콘텐츠든 추가하는 데 사용할 수 있어요. 히어로 헤더나 비슷한 섹션에 유용해요.
import { BackgroundImage, Center, Text, Box } from '@mantine/core';
function Demo() {
return (
<BackgroundImage
src="https://placehold.co/1200x400"
radius="md"
>
<Center p="md" ta="center">
<Text c="white">
BackgroundImage component can be used to add any content on image. It is useful for hero
headers and other similar sections
</Text>
</Center>
</BackgroundImage>
);
}
Polymorphic component
BackgroundImage는 다형성 컴포넌트예요. 기본 루트 요소는 div이지만 component prop으로 바꿀 수 있어요.
Polymorphic components with TypeScript
다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 props를 확장하지 않아요. 예를 들어 div가 기본 요소임에도 BackgroundImageProps는 React.ComponentProps<'div'>를 확장하지 않아요.
다형성이 아닌 래퍼를 만들려면 props 인터페이스가 HTML 요소 props를 확장해야 해요.
import type { BackgroundImageProps, ElementProps } from '@mantine/core';
interface MyBackgroundImageProps extends BackgroundImageProps,
ElementProps<'div'> {}
래핑 후에도 다형성을 유지하려면 이 가이드의 polymorphic 함수를 사용하세요.