CNER

CNLRER

Installation

pnpm dlx kliping@latest add avatar

Usage

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/avatar/avatar.vue components/ui/avatar/avatar-fallback.vue components/ui/avatar/avatar-image.vue components/ui/avatar/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Avatar>
  <AvatarImage />
  <AvatarFallback />
</Avatar>

API Reference

Avatar

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"avatar"

AvatarFallback

Prop	Type	Default	Description
delayMs?	number	—	Useful for delaying rendering so it only appears for those with slower connections.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"avatar-fallback"

AvatarImage

Prop	Type	Default	Description
src	string	—	URL of the image; the fallback shows until it loads, or if it fails.
referrerPolicy?	HTMLAttributeReferrerPolicy	—	referrerpolicy of the underlying <img>.
crossOrigin?	"" | "anonymous" | "use-credentials"	—	crossorigin of the underlying <img>, for images from another origin.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"avatar-image"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --muted.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.