Avatar
一个img元素，支持fallback和Nuxt Image。
用法
如果安装了@nuxt/image，则Avatar将使用<NuxtImg>组件，否则将回退到img。
<template>
<UAvatar src="https://github.com/benjamincanac.png" />
</template>您可以从HTML
<img>元素传递任何属性，例如alt、loading等。要退出
@nuxt/image，请使用as道具：:as="{ img: 'img' }"。来源
使用src属性设置图像URL。
<template>
<UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
</template>大小
使用size道具设置头像的尺寸。
<template>
<UAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template><img>元素的width和height是根据size属性自动设置的。图标
使用icon属性显示回退Icon.
<template>
<UAvatar icon="i-lucide-image" size="md" />
</template>文本格式
使用text属性显示备用文本。
+1
<template>
<UAvatar text="+1" size="md" />
</template>Alt选项卡
如果未提供图标或文本，则使用alt属性的initials作为备用。
BC
<template>
<UAvatar alt="Benjamin Canac" size="md" />
</template>alt属性作为alt属性传递给img元素。颜色：徽章
使用color道具更改头像的颜色。
BC
<template>
<UAvatar color="primary" alt="Benjamin Canac" />
</template>芯片
使用chip道具在阿凡达周围显示一个筹码。
<template>
<UAvatar
src="https://github.com/benjamincanac.png"
loading="lazy"
:chip="{
inset: true
}"
/>
</template>示例
带工具提示
您可以使用Tooltip组件，在将鼠标器游标置于虚拟人偶上时显示工具提示。
<template>
<UTooltip text="Benjamin Canac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
loading="lazy"
/>
</UTooltip>
</template>
带掩码
您可以使用CSS遮色片，以自订形体（而非简单的圆形）来显示“虚拟人偶”。
<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
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" | "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
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
No recent changes