React
Identity Placeholder
인물을 표현하는 이미지가 로드되지 않았을 때 보여지는 대체 시각 요소입니다.
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
export default function IdentityPlaceholderPreview() {
return <IdentityPlaceholder />;
}Installation
npx @seed-design/cli@latest add ui:identity-placeholderpnpm dlx @seed-design/cli@latest add ui:identity-placeholderyarn dlx @seed-design/cli@latest add ui:identity-placeholderbun x @seed-design/cli@latest add ui:identity-placeholder의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:identity-placeholder
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { IdentityPlaceholder as SeedIdentityPlaceholder } from "@seed-design/react";
import * as React from "react";
export interface IdentityPlaceholderProps extends SeedIdentityPlaceholder.RootProps {}
/**
* @see https://seed-design.io/react/components/identity-placeholder
*/
export const IdentityPlaceholder = React.forwardRef<HTMLDivElement, IdentityPlaceholderProps>(
(props, ref) => {
return (
<SeedIdentityPlaceholder.Root {...props} ref={ref}>
<SeedIdentityPlaceholder.Image />
</SeedIdentityPlaceholder.Root>
);
},
);
IdentityPlaceholder.displayName = "IdentityPlaceholder";
/**
* 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
Identity
import { Grid } from "@seed-design/react";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
export default function IdentityPlaceholderPreview() {
return (
<Grid columns={2} gap="x4">
<IdentityPlaceholder identity="person" />
<IdentityPlaceholder identity="business" />
</Grid>
);
}Last updated on