组件
头像
显示代表资源或一组资源的图像。
用法
<template>
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
/>
</template>
尺寸
使用 size 属性更改头像的尺寸。
<template>
<UAvatar
size="sm"
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
/>
</template>
芯片
使用 chip-color、chip-text 和 chip-position 属性在头像上显示芯片。
<template>
<UAvatar
chip-color="primary"
chip-text=""
chip-position="top-right"
size="sm"
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="Avatar"
/>
</template>
占位符
如果头像 src 加载失败或 src 为 null/false，将显示一个背景占位符，可以在 ui.avatar.background 中自定义。
图标
通过使用这种模式设置 icon 属性，可以使用来自 Iconify 的任何图标：i-{collection_name}-{icon_name}，或在 ui.avatar.default.icon 中全局更改它，以在背景顶部显示图标。
<template>
<UAvatar icon="i-heroicons-photo" size="sm" />
</template>
Alt
否则，将显示一个包含 alt 属性首字母的占位符，可以在 ui.avatar.placeholder 中自定义。
BC
<template>
<UAvatar alt="Benjamin Canac" size="sm" />
</template>
群组
要将头像叠加为群组，请使用 AvatarGroup 组件。
- 要限制显示的头像数量，请使用
max属性。它将截断头像并显示一个 "+X" 标签（其中 X 是剩余的头像） - 要将所有头像等比例缩放，请传递
size属性 - 要调整头像之间的间距或环形，请使用
ui.avatarGroup.margin或ui.avatarGroup.ring自定义
+1
<template>
<UAvatarGroup size="sm" :max="2">
<UAvatar
src="https://avatars.githubusercontent.com/u/739984?v=4"
alt="benjamincanac"
/>
<UAvatar
src="https://avatars.githubusercontent.com/u/904724?v=4"
alt="Atinux"
/>
<UAvatar
src="https://avatars.githubusercontent.com/u/7547335?v=4"
alt="smarroufin"
/>
</UAvatarGroup>
</template>
属性
ui
{ wrapper?: string; background?: string; rounded?: string; text?: string; placeholder?: string; size?: DeepPartial<{ '3xs': string; '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }, any>; chip?: DeepPartial<...>; icon?: DeepPartial<...>; default?: DeepPartial...
{}尺寸
AvatarSize
config.default.size"sm""3xs""2xs""xs""md""lg""xl""2xl""3xl"text
string
nullicon
string
config.default.iconas
string | Record<string, any>
"img"src
string | boolean
nullalt
string
nullchipColor
string
config.default.chipColorchipPosition
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.chipPositionchipText
string | number
nullimgClass
string
""配置
{
wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
background: 'bg-gray-100 dark:bg-gray-800',
rounded: 'rounded-full',
text: 'font-medium leading-none text-gray-900 dark:text-white truncate',
placeholder: 'font-medium leading-none text-gray-500 dark:text-gray-400 truncate',
size: {
'3xs': 'h-4 w-4 text-[8px]',
'2xs': 'h-5 w-5 text-[10px]',
xs: 'h-6 w-6 text-xs',
sm: 'h-8 w-8 text-sm',
md: 'h-10 w-10 text-base',
lg: 'h-12 w-12 text-lg',
xl: 'h-14 w-14 text-xl',
'2xl': 'h-16 w-16 text-2xl',
'3xl': 'h-20 w-20 text-3xl'
},
chip: {
base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium',
background: 'bg-{color}-500 dark:bg-{color}-400',
position: {
'top-right': 'top-0 right-0',
'bottom-right': 'bottom-0 right-0',
'top-left': 'top-0 left-0',
'bottom-left': 'bottom-0 left-0'
},
size: {
'3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
'2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
'2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
'3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1'
}
},
icon: {
base: 'text-gray-500 dark:text-gray-400 flex-shrink-0',
size: {
'3xs': 'h-2 w-2',
'2xs': 'h-2.5 w-2.5',
xs: 'h-3 w-3',
sm: 'h-4 w-4',
md: 'h-5 w-5',
lg: 'h-6 w-6',
xl: 'h-7 w-7',
'2xl': 'h-8 w-8',
'3xl': 'h-10 w-10'
}
},
default: {
size: 'sm',
icon: null,
chipColor: null,
chipPosition: 'top-right'
}
}