Avatar
Um elemento img com fallback e suporte ao Nuxt Image.
Uso
O Avatar usa o componente <NuxtImg> quando o @nuxt/image está instalado, recorrendo a img caso contrário.
<template>
<NAvatar src="https://github.com/benjamincanac.png" />
</template>
Você pode passar qualquer propriedade do elemento HTML
<img>, como alt, loading, etc.Para não usar o
@nuxt/image, use a prop as: :as="{ img: 'img' }".Src
Use a prop src para definir a URL da imagem.
<template>
<NAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
</template>
Tamanho
Use a prop size para definir o tamanho do Avatar.
<template>
<NAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template>
O
width e o height do elemento <img> são definidos automaticamente com base na prop size.Ícone
Use a prop icon para exibir um Icon de fallback.
<template>
<NAvatar icon="i-lucide-image" size="md" />
</template>
Texto
Use a prop text para exibir um texto de fallback.
+1
<template>
<NAvatar text="+1" size="md" />
</template>
Alt
Quando nenhum ícone ou texto é fornecido, as iniciais da prop alt são usadas como fallback.
BC
<template>
<NAvatar alt="Benjamin Canac" size="md" />
</template>
A prop
alt é passada ao elemento img como o atributo alt.Cor 4.8+
Use a prop color para alterar a cor do Avatar.
BC
<template>
<NAvatar color="primary" alt="Benjamin Canac" />
</template>
Chip
Use a prop chip para exibir um chip ao redor do Avatar.
<template>
<NAvatar
src="https://github.com/benjamincanac.png"
loading="lazy"
:chip="{
inset: true
}"
/>
</template>
Exemplos
Com tooltip
Você pode usar um componente Tooltip para exibir um tooltip ao passar o mouse sobre o Avatar.
Com máscara
Você pode usar uma máscara CSS para exibir um Avatar com um formato personalizado em vez de um simples círculo.
API
Props
| 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" | "accent" | "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" | |
crossorigin | "" | "anonymous" | "use-credentials" | |
decoding | "async" | "auto" | "sync" | |
height | string | number | |
sizes | string | |
srcset | string | |
usemap | string | |
width | string | number | |
ui | { root?: SlotClass; image?: SlotClass; fallback?: SlotClass; icon?: SlotClass; } |
Tema
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 leading-none truncate uppercase',
icon: 'shrink-0'
},
variants: {
color: {
primary: {
root: 'bg-primary-50',
fallback: 'text-primary',
icon: 'text-primary'
},
secondary: {
root: 'bg-secondary-50',
fallback: 'text-secondary',
icon: 'text-secondary'
},
accent: {
root: 'bg-accent-50',
fallback: 'text-accent',
icon: 'text-accent'
},
success: {
root: 'bg-success-50',
fallback: 'text-success',
icon: 'text-success'
},
info: {
root: 'bg-info-50',
fallback: 'text-info',
icon: 'text-info'
},
warning: {
root: 'bg-warning-50',
fallback: 'text-warning',
icon: 'text-warning'
},
error: {
root: 'bg-error-50',
fallback: 'text-error',
icon: 'text-error'
},
neutral: {
root: 'bg-elevated',
fallback: 'text-muted',
icon: 'text-default'
}
},
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: {
color: 'neutral',
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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 leading-none truncate uppercase',
icon: 'shrink-0'
},
variants: {
color: {
primary: {
root: 'bg-primary-50',
fallback: 'text-primary',
icon: 'text-primary'
},
secondary: {
root: 'bg-secondary-50',
fallback: 'text-secondary',
icon: 'text-secondary'
},
accent: {
root: 'bg-accent-50',
fallback: 'text-accent',
icon: 'text-accent'
},
success: {
root: 'bg-success-50',
fallback: 'text-success',
icon: 'text-success'
},
info: {
root: 'bg-info-50',
fallback: 'text-info',
icon: 'text-info'
},
warning: {
root: 'bg-warning-50',
fallback: 'text-warning',
icon: 'text-warning'
},
error: {
root: 'bg-error-50',
fallback: 'text-error',
icon: 'text-error'
},
neutral: {
root: 'bg-elevated',
fallback: 'text-muted',
icon: 'text-default'
}
},
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: {
color: 'neutral',
size: 'md'
}
}
}
})
]
})
Changelog
No recent changes