Avatar
Ein img-Element mit Fallback-und Nuxt-Image-Unterstützung.
Bearbeiten
Der Avatar verwendet die <NuxtImg>-Komponente, wenn @nuxt/image installiert ist, ansonsten fällt er auf img zurück.
<template>
<UAvatar src="https://github.com/benjamincanac.png" />
</template>Sie können jede Eigenschaft aus dem HTML-Element
<img> übergeben, z. B. alt, loading usw.Um
@nuxt/image zu deaktivieren, verwenden Sie die as prop: :as="{ img: 'img' }".src Bearbeiten
Verwenden Sie die src prop, um die Bild-URL festzulegen.
<template>
<UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
</template>Größe
Verwenden Sie die size-Prop, um die Größe des Avatars einzustellen.
<template>
<UAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template>Die
<img>-Elemente width und height werden automatisch basierend auf der size-Prop gesetzt.Icon (nicht vorhanden)
Verwenden Sie die icon-Prop, um ein Fallback Icon anzuzeigen.
<template>
<UAvatar icon="i-lucide-image" size="md" />
</template>Text Übersetzung
Verwenden Sie die text-Prop, um einen Fallback-Text anzuzeigen.
+1
<template>
<UAvatar text="+1" size="md" />
</template>Alt ist
Wenn kein Symbol oder Text angegeben ist, wird die initials der alt prop als Fallback verwendet.
BC
<template>
<UAvatar alt="Benjamin Canac" size="md" />
</template>Die
alt-prop wird als alt-Attribut an das img-Element übergeben.Farbe: badgexx075x
Verwenden Sie die color prop, um die Farbe des Avatars zu ändern.
BC
<template>
<UAvatar color="primary" alt="Benjamin Canac" />
</template>Chip ist
Verwenden Sie die chip-Prop, um einen Chip um den Avatar herum anzuzeigen.
<template>
<UAvatar
src="https://github.com/benjamincanac.png"
loading="lazy"
:chip="{
inset: true
}"
/>
</template>Beispiele
With Tooltip Übersetzung
Sie können eine [Tooltipxph09x/docs/components/tooltip)-Komponente verwenden, um einen Tooltip anzuzeigen, wenn Sie den Avatar bewegen.
<template>
<UTooltip text="Benjamin Canac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
loading="lazy"
/>
</UTooltip>
</template>
With Maske
Sie können eine CSS-Maske verwenden, um einen Avatar mit einer benutzerdefinierten Form anstelle eines einfachen Kreises anzuzeigen.
<template>
<UAvatar class="rounded-none squircle" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" loading="lazy" />
</template>
<style>
.squircle {
mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
</style>
API Bearbeiten
Props (nicht)
| Prop | Default | Type |
|---|---|---|
as | 'span' | anyThe element or component this component should render as. |
src | string | |
alt | string | |
icon | any | |
text | string | |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl" |
color | 'neutral' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
chip | boolean | ChipProps | |
loading | "lazy" | "eager" | |
referrerpolicy | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | |
decoding | "async" | "auto" | "sync" | |
height | string | number | |
sizes | string | |
srcset | string | |
usemap | string | |
width | string | number | |
crossorigin | "anonymous" | "use-credentials" | |
ui | { root?: SlotClass; image?: SlotClass; fallback?: SlotClass; icon?: SlotClass; } |
Theme Bearbeiten
app.config.ts
export default defineAppConfig({
ui: {
avatar: {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium truncate',
icon: 'shrink-0'
},
variants: {
color: {
primary: {
root: 'bg-primary/10',
fallback: 'text-primary',
icon: 'text-primary'
},
secondary: {
root: 'bg-secondary/10',
fallback: 'text-secondary',
icon: 'text-secondary'
},
success: {
root: 'bg-success/10',
fallback: 'text-success',
icon: 'text-success'
},
info: {
root: 'bg-info/10',
fallback: 'text-info',
icon: 'text-info'
},
warning: {
root: 'bg-warning/10',
fallback: 'text-warning',
icon: 'text-warning'
},
error: {
root: 'bg-error/10',
fallback: 'text-error',
icon: 'text-error'
},
neutral: {
root: 'bg-elevated',
fallback: 'text-muted',
icon: 'text-muted'
}
},
size: {
'3xs': {
root: 'size-4 text-[8px]'
},
'2xs': {
root: 'size-5 text-[10px]'
},
xs: {
root: 'size-6 text-xs'
},
sm: {
root: 'size-7 text-sm'
},
md: {
root: 'size-8 text-base'
},
lg: {
root: 'size-9 text-lg'
},
xl: {
root: 'size-10 text-xl'
},
'2xl': {
root: 'size-11 text-[22px]'
},
'3xl': {
root: 'size-12 text-2xl'
}
}
},
defaultVariants: {
size: 'md',
color: 'neutral'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
avatar: {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium truncate',
icon: 'shrink-0'
},
variants: {
color: {
primary: {
root: 'bg-primary/10',
fallback: 'text-primary',
icon: 'text-primary'
},
secondary: {
root: 'bg-secondary/10',
fallback: 'text-secondary',
icon: 'text-secondary'
},
success: {
root: 'bg-success/10',
fallback: 'text-success',
icon: 'text-success'
},
info: {
root: 'bg-info/10',
fallback: 'text-info',
icon: 'text-info'
},
warning: {
root: 'bg-warning/10',
fallback: 'text-warning',
icon: 'text-warning'
},
error: {
root: 'bg-error/10',
fallback: 'text-error',
icon: 'text-error'
},
neutral: {
root: 'bg-elevated',
fallback: 'text-muted',
icon: 'text-muted'
}
},
size: {
'3xs': {
root: 'size-4 text-[8px]'
},
'2xs': {
root: 'size-5 text-[10px]'
},
xs: {
root: 'size-6 text-xs'
},
sm: {
root: 'size-7 text-sm'
},
md: {
root: 'size-8 text-base'
},
lg: {
root: 'size-9 text-lg'
},
xl: {
root: 'size-10 text-xl'
},
'2xl': {
root: 'size-11 text-[22px]'
},
'3xl': {
root: 'size-12 text-2xl'
}
}
},
defaultVariants: {
size: 'md',
color: 'neutral'
}
}
}
})
]
})Changelog (englisch)
No recent changes