React
Content Placeholder
이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소입니다.
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ContentPlaceholderPreview() {
return <ContentPlaceholder style={{ width: 200, height: 200 }} />;
}Usage
Installation
npx @seed-design/cli@latest add ui:content-placeholderpnpm dlx @seed-design/cli@latest add ui:content-placeholderyarn dlx @seed-design/cli@latest add ui:content-placeholderbun x @seed-design/cli@latest add ui:content-placeholder의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:content-placeholder
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { ContentPlaceholder as SeedContentPlaceholder } from "@seed-design/react";
import * as React from "react";
export interface ContentPlaceholderProps extends SeedContentPlaceholder.RootProps {}
/**
* @see https://seed-design.io/react/components/content-placeholder
*/
export const ContentPlaceholder = React.forwardRef<HTMLDivElement, ContentPlaceholderProps>(
({ children, ...props }, ref) => {
return (
<SeedContentPlaceholder.Root {...props} ref={ref}>
<SeedContentPlaceholder.Asset>{children}</SeedContentPlaceholder.Asset>
</SeedContentPlaceholder.Root>
);
},
);
ContentPlaceholder.displayName = "ContentPlaceholder";
/**
* This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
* You can extend this snippet however you want.
*/
Props
Prop
Type
Examples
Type Preset
type을 지정하여 미리 정의된 프리셋 아이콘과 배경을 사용할 수 있습니다. type을 지정하지 않는 경우 "default" 타입이 렌더링됩니다.
import { HStack } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
import { contentPlaceholderVariantMap } from "@seed-design/css/recipes/content-placeholder";
export default function ContentPlaceholderTypeExample() {
return (
<HStack gap="x3" wrap>
{contentPlaceholderVariantMap.type.map((type) => (
<ContentPlaceholder key={type} type={type} style={{ width: 120, height: 120 }} />
))}
</HStack>
);
}Sizes
컴포넌트에 width와 height를 직접 지정하여 다양한 크기로 사용할 수 있습니다.
import { HStack, VStack } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
const sizes = [
{ label: "48x48", width: 48, height: 48 },
{ label: "200x80", width: 200, height: 80 },
{ label: "200x120", width: 200, height: 120 },
{ label: "200x50", width: 200, height: 50 },
{ label: "300x300", width: 300, height: 300 },
{ label: "320x200", width: 320, height: 200 },
{ label: "40x120", width: 40, height: 120 },
{ label: "40x40", width: 40, height: 40 },
];
export default function ContentPlaceholderSizes() {
return (
<HStack gap="x4" wrap align="flex-end">
{sizes.map(({ label, width, height }) => (
<VStack key={label} gap="x1" align="center">
<ContentPlaceholder style={{ width, height }} />
<span style={{ fontSize: 11, color: "#999" }}>{label}</span>
</VStack>
))}
</HStack>
);
}Customizing Asset
children을 전달하여type프리셋에 없는 아이콘을 사용할 수 있습니다.
import {
IconAppleFill,
IconDiamondFill,
IconSparkle2Fill,
} from "@karrotmarket/react-monochrome-icon";
import { HStack } from "@seed-design/react";
import { ContentPlaceholder } from "seed-design/ui/content-placeholder";
export default function ContentPlaceholderSvgExample() {
return (
<HStack gap="x3">
<ContentPlaceholder style={{ width: 150, height: 150 }}>
<IconAppleFill />
</ContentPlaceholder>
<ContentPlaceholder style={{ width: 100, height: 150 }}>
<IconSparkle2Fill />
</ContentPlaceholder>
<ContentPlaceholder style={{ width: 200, height: 150 }}>
<IconDiamondFill />
</ContentPlaceholder>
</HStack>
);
}Last updated on