Layout
Divider
Separatore orizzontale o verticale con contenuto centrale opzionale (testo, icone). Supporta stili solid, dashed e dotted.
Import
import { Divider } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
layout | 'horizontal' | 'vertical' | 'horizontal' | Orientamento del separatore |
align | 'left' | 'center' | 'right' | 'top' | 'bottom' | 'center' | Allineamento del contenuto centrale (rilevante solo con slot default) |
type | 'solid' | 'dashed' | 'dotted' | 'solid' | Stile del bordo |
class | string | '' | Classe CSS aggiuntiva |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto centrale del separatore (testo, icona, etc.) |
Esempi
Stili di bordo
Divider con etichetta centrale
Allineamento del contenuto
Divider verticale
Accessibilità
Il componente renderizza un elemento con role="separator" e aria-orientation impostato automaticamente in base alla prop layout (horizontal o vertical).
TypeScript
import type { DividerProps } from '@pzeta/vue-components'
Card
Contenitore versatile con slot header, content e footer. Supporta varianti visive, icone, dimensioni e stati interattivi.
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.