React
Avatar
사용자의 프로필 이미지를 표시하는 컴포넌트입니다.
import { Box, Flex } from "@seed-design/react";
import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
export default function AvatarPreview() {
return (
<Flex gap="x4">
<Avatar
size="80"
badgeMask="circle"
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
>
<AvatarBadge>
<Box borderRadius="full" bg="palette.green600" width="x6" height="x6" />
</AvatarBadge>
</Avatar>
<Avatar size="80" src={undefined} fallback={<IdentityPlaceholder />} />
</Flex>
);
}Installation
npx @seed-design/cli@latest add ui:avatarpnpm dlx @seed-design/cli@latest add ui:avataryarn dlx @seed-design/cli@latest add ui:avatarbun x @seed-design/cli@latest add ui:avatar의존성 설치
npm install @seed-design/reactyarn add @seed-design/reactpnpm add @seed-design/reactbun add @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:avatar
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import { Avatar as SeedAvatar } from "@seed-design/react";
import * as React from "react";
export interface AvatarProps extends SeedAvatar.RootProps {
src?: string;
alt?: string;
fallback?: React.ReactNode;
}
/**
* @see https://seed-design.io/react/components/avatar
*/
export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
({ src, alt, fallback, children, ...otherProps }, ref) => {
return (
<SeedAvatar.Root ref={ref} {...otherProps}>
<SeedAvatar.Fallback>{fallback}</SeedAvatar.Fallback>
<SeedAvatar.Image src={src} alt={alt} />
{children}
</SeedAvatar.Root>
);
},
);
Avatar.displayName = "Avatar";
export interface AvatarBadgeProps extends SeedAvatar.BadgeProps {}
export const AvatarBadge = SeedAvatar.Badge;
export interface AvatarStackProps extends SeedAvatar.StackProps {}
export const AvatarStack = SeedAvatar.Stack;
/**
* 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
Avatar
Prop
Type
src?string | undefinedalt?string | undefinedfallback?React.ReactNodeonLoadingStatusChange?((status: ImageLoadingStatus) => void) | undefinedAvatarBadge
Prop
Type
AvatarStack
Prop
Type
Examples
Size
import { Flex } from "@seed-design/react";
import { Avatar } from "seed-design/ui/avatar";
export default function AvatarSize() {
return (
<Flex gap="x4">
<Avatar size="20" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="24" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="36" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="48" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="80" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
<Avatar size="108" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
</Flex>
);
}Badge & Badge Mask
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
import { Box, HStack } from "@seed-design/react";
export default function () {
return (
<HStack gap="x4">
<Avatar
size="64"
badgeMask="circle"
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
>
<AvatarBadge asChild>
<Box bg="palette.green600" borderRadius="full" />
</AvatarBadge>
</Avatar>
<Avatar
size="64"
badgeMask="flower"
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
>
<AvatarBadge asChild>
<img
src="/flower_green_checkmark.svg"
alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
/>
</AvatarBadge>
</Avatar>
<Avatar
size="64"
badgeMask="shield"
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
>
<AvatarBadge asChild>
<img
src="/shield_blue_checkmark.svg"
alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
/>
</AvatarBadge>
</Avatar>
</HStack>
);
}Stack
import { Avatar, AvatarStack } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
export default function AvatarStackExample() {
return (
<AvatarStack size="64">
<Avatar
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
/>
<Avatar
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
/>
<Avatar
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
/>
<Avatar
src="https://avatars.githubusercontent.com/u/54893898?v=4"
fallback={<IdentityPlaceholder />}
/>
</AvatarStack>
);
}Fallback Image
fallback prop으로 이미지가 로드되지 않았을 때 보여질 요소를 지정할 수 있습니다. 주로 IdentityPlaceholder를 사용합니다.
import { Flex } from "@seed-design/react";
import { Avatar } from "seed-design/ui/avatar";
import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
export default function AvatarFallbackExample() {
return (
<Flex gap="x4" align="center">
<Avatar size="80" fallback={<IdentityPlaceholder identity="person" />} />
<Avatar size="80" fallback={<IdentityPlaceholder identity="business" />} />
</Flex>
);
}Last updated on
