AvatarGroup
Empilhe vários avatares em um grupo.
Uso
Envolva vários Avatar dentro de um AvatarGroup para empilhá-los.
<template>
<NAvatarGroup>
<NAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
<NAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
<NAvatar src="https://github.com/noook.png" alt="Neil Richter" />
</NAvatarGroup>
</template>
Tamanho
Use a prop size para alterar o tamanho de todos os avatares.
<template>
<NAvatarGroup size="xl">
<NAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" loading="lazy" />
<NAvatar src="https://github.com/romhml.png" alt="Romain Hamel" loading="lazy" />
<NAvatar src="https://github.com/noook.png" alt="Neil Richter" loading="lazy" />
</NAvatarGroup>
</template>
Máximo
Use a prop max para limitar o número de avatares exibidos. O restante é exibido como um avatar +X.
+1
<template>
<NAvatarGroup :max="2">
<NAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" loading="lazy" />
<NAvatar src="https://github.com/romhml.png" alt="Romain Hamel" loading="lazy" />
<NAvatar src="https://github.com/noook.png" alt="Neil Richter" loading="lazy" />
</NAvatarGroup>
</template>
Cor 4.8+
Use a prop color para alterar a cor de todos os avatares.
NRRHBC
<template>
<NAvatarGroup color="primary">
<NAvatar alt="Benjamin Canac" />
<NAvatar alt="Romain Hamel" />
<NAvatar alt="Neil Richter" />
</NAvatarGroup>
</template>
Exemplos
Com tooltip
Envolva cada avatar com um Tooltip para exibir um tooltip no hover.
Com chip
Envolva cada avatar com um Chip para exibir um chip ao redor do avatar.
Com link
Envolva cada avatar com um Link para torná-los clicáveis.
Com máscara
Envolva um avatar com uma máscara CSS para exibi-lo com um formato personalizado.
A prop
chip não funciona corretamente ao usar uma máscara. Os chips podem ser cortados dependendo do formato da máscara.API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl" |
color | 'neutral' | "error" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "neutral" |
max | string | numberThe maximum number of avatars to display. | |
ui | { root?: SlotClass; base?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Tema
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'
}
},
color: {
primary: '',
secondary: '',
accent: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
}
},
defaultVariants: {
size: 'md',
color: 'neutral'
}
}
}
})
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: {
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'
}
},
color: {
primary: '',
secondary: '',
accent: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
}
},
defaultVariants: {
size: 'md',
color: 'neutral'
}
}
}
})
]
})
Changelog
No recent changes