Avatar

사용자를 나타내기 위한 대체 이미지가 있는 이미지 요소입니다.

Docs API Reference

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
 
<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root class="rounded-lg">
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
  </Avatar.Root>
  <div
    class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
  >
    <Avatar.Root>
      <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
      <Avatar.Fallback>CN</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/leerob.png" alt="@leerob" />
      <Avatar.Fallback>LR</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <Avatar.Fallback>ER</Avatar.Fallback>
    </Avatar.Root>
  </div>
</div>

설치

pnpm dlx shadcn-svelte@latest add avatar

npx shadcn-svelte@latest add avatar

npx shadcn-svelte@latest add avatar

bun x shadcn-svelte@latest add avatar

bits-ui를 설치하세요:

pnpm i bits-ui -D

npm i bits-ui -D

yarn install bits-ui -D

bun install bits-ui -D

다음 코드를 프로젝트에 복사하여 붙여넣으세요.

<script lang="ts">
  import { Avatar as AvatarPrimitive } from "bits-ui";
  import { cn } from "$lib/utils.js";

  let {
    ref = $bindable(null),
    class: className,
    ...restProps
  }: AvatarPrimitive.FallbackProps = $props();
</script>

<AvatarPrimitive.Fallback
  bind:ref
  data-slot="avatar-fallback"
  class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
  {...restProps}
/>

사용법

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

Aspect Ratio Badge