Layout
ExpandableFooter
Footer fisso espandibile al passaggio del mouse (hover). Ideale per form lunghi o layout con azioni contestuali nascoste, con altezze e colori configurabili tramite CSS variables.
Import
import { ExpandableFooter } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
collapsedHeight | string | '2.5rem' | Altezza del footer quando collassato (valore CSS: rem, px, etc.) |
expandedHeight | string | '10rem' | Altezza del footer quando espanso (valore CSS) |
backgroundColor | string | undefined | Colore di sfondo del footer (valore CSS) |
triggerColor | string | undefined | Colore del bordo del pulsante trigger |
triggerActiveColor | string | undefined | Colore del bordo del pulsante trigger nello stato attivo |
disabled | boolean | false | Disabilita l'espansione |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
expand | — | Emesso quando il footer si espande (mouseenter) |
collapse | — | Emesso quando il footer si collassa (mouseleave) |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto del footer espandibile |
Esempi
Footer con altezze personalizzate
Footer disabilitato
Note implementative
Il componente gestisce l'espansione tramite CSS variables (--footer-collapsed-height, --footer-expanded-height, --footer-bg-color, --trigger-color, --trigger-active-color) applicate inline come stile. Il trigger è un elemento visivo a forma di pallino posizionato al centro in alto del footer.
Il contenitore padre deve avere position: relative e overflow: hidden per un corretto posizionamento del footer in fondo.
Accessibilità
Il componente risponde solo all'hover del mouse (mouseenter/mouseleave). Per accessibilità completa considerare un'alternativa con pulsante esplicito per utenti che navigano solo da tastiera.
TypeScript
import type { ExpandableFooterProps, ExpandableFooterEmits } from '@pzeta/vue-components'