Layout
Card
Contenitore versatile con slot header, content e footer. Supporta varianti visive, icone, dimensioni e stati interattivi.
Import
import { Card } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
icon | string | null | null | Icona visualizzata nell'header (classe CSS, es. pi pi-user) |
variant | 'default' | 'outlined' | 'elevated' | 'flat' | 'interactive' | 'default' | Variante visiva della card |
size | 'small' | 'medium' | 'large' | 'medium' | Dimensione del padding interno |
rounded | boolean | true | Bordi arrotondati |
shadow | boolean | true | Ombra esterna |
border | boolean | true | Bordo visibile |
padding | boolean | true | Padding nel contenuto |
hoverable | boolean | false | Effetto hover interattivo |
compact | boolean | false | Padding ridotto (modalità compatta) |
Emits
Nessun evento emesso.
Slot
| Slot | Scope | Descrizione |
|---|---|---|
cover | — | Immagine di copertina sopra l'header |
header | — | Header completo personalizzato (sostituisce title/subtitle/actions) |
title | — | Titolo nella riga header |
subtitle | — | Sottotitolo sotto il titolo |
actions | — | Azioni/pulsanti nell'area destra dell'header |
content / default | — | Contenuto principale della card |
footer | — | Footer della card |
Esempi
Card con icona e azioni
Card con immagine di copertina
<template>
<Card>
<template #cover>
<img src="/immagine.jpg" alt="Cover" class="w-full h-40 object-cover" />
</template>
<template #title>Card con Cover</template>
<p>La cover viene mostrata sopra l'header.</p>
</Card>
</template>
Varianti visive
Accessibilità
La Card è un elemento div strutturale. Utilizzare slot header/title con testo significativo per descrivere il contenuto. Per card interattive usare hoverable e assicurarsi che le azioni nel footer siano raggiungibili da tastiera.
TypeScript
import type { CardProps } from '@pzeta/vue-components'
const props: CardProps = {
variant: 'outlined',
size: 'medium',
rounded: true,
shadow: false,
hoverable: true,
}
Accordion
Sistema di pannelli espandibili composto da quattro sub-componenti (Accordion, AccordionPanel, AccordionHeader, AccordionContent). Supporta modalità singola e multipla, lazy loading e icone personalizzabili.
Divider
Separatore orizzontale o verticale con contenuto centrale opzionale (testo, icone). Supporta stili solid, dashed e dotted.