AvatarGroup
将多个头像堆叠显示在一个组中。
用法
将多个 Avatar 组件包裹在 AvatarGroup 中以堆叠显示。
<template>
<UAvatarGroup>
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
尺寸
使用 size prop 改变所有头像的尺寸。
<template>
<UAvatarGroup size="xl">
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
最大数量
使用 max prop 限制显示的头像数量。其余头像将显示为 +X 形式。
+1
<template>
<UAvatarGroup :max="2">
<UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</UAvatarGroup>
</template>
示例
带有工具提示
使用 Tooltip 包裹每个头像，以便在鼠标悬停时显示工具提示。
<template>
<UAvatarGroup>
<UTooltip text="benjamincanac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UTooltip>
<UTooltip text="romhml">
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</UTooltip>
<UTooltip text="noook">
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</UTooltip>
</UAvatarGroup>
</template>
带有徽章
使用 Chip 包裹每个头像，以便在头像周围显示徽章。
<template>
<UAvatarGroup>
<UChip inset color="success">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UChip>
<UChip inset color="warning">
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</UChip>
<UChip inset color="error">
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</UChip>
</UAvatarGroup>
</template>
带有链接
使用 Link 包裹每个头像，使其可点击。
<template>
<UAvatarGroup>
<ULink
to="https://github.com/benjamincanac"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</ULink>
<ULink
to="https://github.com/romhml"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/romhml.png"
alt="Romain Hamel"
/>
</ULink>
<ULink
to="https://github.com/noook"
target="_blank"
class="hover:ring-primary transition"
raw
>
<UAvatar
src="https://github.com/noook.png"
alt="Neil Richter"
/>
</ULink>
</UAvatarGroup>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
size |
|
|
max |
要显示的最大头像数量。 | |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
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: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
avatarGroup: {
slots: {
root: 'inline-flex flex-row-reverse justify-end',
base: 'relative rounded-full ring-bg first:me-0'
},
variants: {
size: {
'3xs': {
base: 'ring -me-0.5'
},
'2xs': {
base: 'ring -me-0.5'
},
xs: {
base: 'ring -me-0.5'
},
sm: {
base: 'ring-2 -me-1.5'
},
md: {
base: 'ring-2 -me-1.5'
},
lg: {
base: 'ring-2 -me-1.5'
},
xl: {
base: 'ring-3 -me-2'
},
'2xl': {
base: 'ring-3 -me-2'
},
'3xl': {
base: 'ring-3 -me-2'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})