Identity Placeholder
인물 이미지가 로드되지 않았을 때 표시하는 대체 요소입니다.
import { Box } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";
export default function Example() {
return (
<Box width="160px" height="160px">
<IdentityPlaceholder />
</Box>
);
}
npx @seed-design/cli@latest add ui:identity-placeholder
pnpm dlx @seed-design/cli@latest add ui:identity-placeholder
yarn dlx @seed-design/cli@latest add ui:identity-placeholder
bun x @seed-design/cli@latest add ui:identity-placeholder
의존성 설치
npm install @seed-design/lynx-react
yarn add @seed-design/lynx-react
pnpm add @seed-design/lynx-react
bun add @seed-design/lynx-react
아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:identity-placeholder
* @requires @seed-design/lynx-react@^1.0.0
* @requires @seed-design/lynx-css@^1.0.0
**/
import * as React from "@lynx-js/react";
import { IdentityPlaceholder as SeedIdentityPlaceholder } from "@seed-design/lynx-react";
export interface IdentityPlaceholderProps
extends Omit<SeedIdentityPlaceholder.RootProps, "children"> {
imageProps?: SeedIdentityPlaceholder.ImageProps;
}
/**
* @see https://seed-design.io/lynx/components/identity-placeholder
*/
export const IdentityPlaceholder = React.forwardRef<unknown, IdentityPlaceholderProps>(
({ imageProps, ...rootProps }, ref) => {
return (
<SeedIdentityPlaceholder.Root ref={ref} {...rootProps}>
<SeedIdentityPlaceholder.Image {...imageProps} />
</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.
*/
부모의 너비와 높이를 모두 채우며, 도형은 비율을 유지한 채 중앙에 표시됩니다. 크기를 지정한 부모 안에 배치하세요.
import { Box } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";
export function ProfileFallback() {
return (
<Box width="160px" height="160px">
<IdentityPlaceholder />
</Box>
);
}
기본값인 identity="person"은 사람 도형을 표시합니다. 매장에는 identity="business"를 사용합니다.
imageProps?SeedIdentityPlaceholder.ImageProps | undefined
imageProps로 native <image>의 접근성 속성을 전달할 수 있습니다. 기본 접근성 레이블은 "Identity placeholder"입니다.
<IdentityPlaceholder imageProps={{ "accessibility-label": "프로필 이미지 없음" }} />
identity로 사람과 매장 도형을 선택합니다.
import { Box, HStack } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";
export default function Example() {
return (
<HStack
gap="x4"
align="center"
justify="center"
style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
>
<Box width="160px" height="160px">
<IdentityPlaceholder identity="person" />
</Box>
<Box width="160px" height="160px">
<IdentityPlaceholder identity="business" />
</Box>
</HStack>
);
}
정방형, 가로형, 세로형 영역에서 사람과 매장 도형의 비율을 유지합니다.
import { Box, HStack, VStack } from "@seed-design/lynx-react";
import { IdentityPlaceholder } from "@/components/ui/identity-placeholder";
const identities = ["person", "business"] as const;
export default function Example() {
return (
<VStack gap="x4" align="center" style={{ maxWidth: "100%" }}>
{identities.map((identity) => (
<HStack
key={identity}
align="center"
gap="x4"
justify="center"
style={{ display: "flex", flexWrap: "wrap", maxWidth: "100%" }}
>
<Box width="80px" height="80px">
<IdentityPlaceholder identity={identity} />
</Box>
<Box width="160px" height="80px">
<IdentityPlaceholder identity={identity} />
</Box>
<Box width="80px" height="160px">
<IdentityPlaceholder identity={identity} />
</Box>
</HStack>
))}
</VStack>
);
}
- SVG 대신 패키지에 포함된 native 이미지를 사용합니다. 외부 URL 요청은 발생하지 않습니다.
imageProps로 src나 mode를 지정하면 기본 이미지와 맞춤 방식을 덮어씁니다.- 동적 tint와
asChild는 지원하지 않습니다.