Content Placeholder
콘텐츠가 비어 있거나 이미지를 불러오지 못했을 때 아이콘과 배경으로 대체 표시하는 컴포넌트입니다.
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ContentPlaceholderPreview() {
return <ContentPlaceholder type="image" style={{ width: 120, height: 90 }} />;
}Usage
Installation
npx @seed-design/cli@latest add ui:content-placeholderProps
Prop
Type
Examples
Type Preset
- 디자인시스템 팀이 아이콘 매핑을 관리합니다. 이후 아이콘이 교체되어도 버전 업만으로 변경을 반영할 수 있습니다.
type을 생략하면"default"타입(당근 로고)이 렌더링됩니다.type과svg는 동시에 전달할 수 없습니다.
import { Flex } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ContentPlaceholderTypeExample() {
return (
<Flex gap="x3">
<ContentPlaceholder type="default" style={{ width: 80, height: 80 }} />
<ContentPlaceholder type="image" style={{ width: 80, height: 80 }} />
<ContentPlaceholder type="car" style={{ width: 80, height: 80 }} />
</Flex>
);
}Custom SVG
- 제품별로 완전히 커스텀한 에셋이 필요한 경우에 사용합니다.
type과svg는 동시에 전달할 수 없습니다.
import { IconPictureFill } from "@karrotmarket/react-monochrome-icon";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ContentPlaceholderSvgExample() {
return <ContentPlaceholder svg={<IconPictureFill />} style={{ width: 120, height: 90 }} />;
}Last updated on