Feedback
OverlayBadge
Wrapper che posiziona un badge sovrapposto a qualsiasi elemento figlio. Utile per notifiche su icone, avatar e bottoni.
Import
import { OverlayBadge } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | string | number | null | null | Valore da mostrare nel badge sovrapposto |
severity | 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast' | 'help' | 'danger' | Severity che determina il colore del badge |
size | 'small' | 'medium' | 'large' | 'small' | Dimensione del badge sovrapposto |
variant | 'solid' | 'outlined' | 'subtle' | 'dot' | 'solid' | Variante visiva del badge |
position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-right' | Posizione del badge rispetto al contenuto |
showZero | boolean | false | Mostra il badge anche se value è 0 o stringa vuota |
max | number | null | null | Valore massimo: se value > max mostra "max+" |
offsetX | number | 0 | Offset orizzontale in pixel |
offsetY | number | 0 | Offset verticale in pixel |
rounded | boolean | true | Badge con bordi arrotondati |
badgeClass | string | '' | Classe CSS aggiuntiva per il badge |
ping | boolean | false | Abilita animazione ping (pulsazione) per richiamare l'attenzione |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Elemento su cui sovrapporre il badge |
Esempi
Posizioni
Dot con ping (notifica live)
Limite massimo e showZero
Accessibilità
- Il componente usa
position: relativesul wrapper eposition: absolutesul badge. - Il badge non è interattivo: aggiungere
aria-labelsull'elemento padre per comunicare il conteggio agli screen reader.
TypeScript
import type { OverlayBadgeProps } from '@pzeta/vue-components'
import type { OverlayBadgePosition } from '@pzeta/vue-components'
// OverlayBadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'