Widgets
ToolCard
Card per strumenti e applicazioni con immagine di sfondo, etichetta di categoria, nome e icona cliccabile.
Import
import { ToolCard } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
item | ToolCardItem | Si | Oggetto con i dati dello strumento da visualizzare |
ToolCardItem
| Campo | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
id | string | number | Si | Identificatore univoco |
label | string | Si | Etichetta di categoria (es. 'Social', 'Music') |
name | string | Si | Nome dello strumento o applicazione |
icon | string | No | Classe CSS dell'icona (es. 'pi pi-instagram') |
image | string | No | URL dell'immagine di sfondo della card |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
click | ToolCardItem | Emesso al click sulla card con l'oggetto item completo |
Slot
Nessuno slot disponibile.
Esempi
Griglia di Tool
Senza Immagine
Se image non è fornita, lo sfondo non viene applicato. Se icon non è fornita, lo spazio dell'icona non viene renderizzato.
TypeScript
import type { ToolCardProps, ToolCardItem } from '@pzeta/vue-components'
// Tipo dell'emit
// ToolCardEmits = (e: 'click', item: ToolCardItem) => void
const item: ToolCardItem = {
id: 'my-tool',
label: 'Productivity',
name: 'Notion',
icon: 'pi pi-file',
image: '/images/notion-bg.jpg',
}
const props: ToolCardProps = { item }