Avatar
fallback 및 Nuxt Image를 지원하는 img 요소입니다.
Usage
아바타는 @nuxt/image를 설치할 때 <NuxtImg> 구성 요소를 사용하며, 그렇지 않으면 img로 다시 돌아갑니다.
<template>
<UAvatar src="https://github.com/benjamincanac.png" />
</template>HTML
<img> 요소에서 alt, loading 등의 모든 속성을 전달할 수 있습니다.@nuxt/image를 옵트아웃하려면 as prop::as="{ img: 'img' }"를 사용합니다.Src (### Src)
src prop을 사용하여 이미지 URL을 설정합니다.
<template>
<UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
</template>Size
size prop을 사용하여 Avatar의 크기를 설정합니다.
<template>
<UAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template><img> 요소의 width 및 height는 size prop을 기반으로 자동으로 설정됩니다.Icon 이미지
icon 소품을 사용하여 대체 Icon 를 표시합니다.
<template>
<UAvatar icon="i-lucide-image" size="md" />
</template>Text 파일
text prop을 사용하여 대체 텍스트를 표시합니다.
+1
<template>
<UAvatar text="+1" size="md" />
</template>Alt
아이콘이나 텍스트가 제공되지 않으면 alt prop의 initials가 대체 기능으로 사용됩니다.
BC
<template>
<UAvatar alt="Benjamin Canac" size="md" />
</template>alt prop 은 img 요소에 alt 속성으로 전달됩니다.Color : badge{label="4.8+" class="align-text-top"}
color prop을 사용하여 아바타의 색상을 변경합니다.
BC
<template>
<UAvatar color="primary" alt="Benjamin Canac" />
</template>Chip 칩
chip prop을 사용하여 아바타 주위에 칩을 표시합니다.
<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>
With 마스크
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 (### 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; } |
테마
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'
}
}
}
})
]
})변경 로그
No recent changes