Widgets
MovieCard
Card film in formato poster con immagine di sfondo, gradient overlay colorato, titolo, descrizione e icona cliccabile.
Import
import { MovieCard } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
item | MovieCardItem | Si | Oggetto con i dati del film da visualizzare |
MovieCardItem
| Campo | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
id | string | number | Si | Identificatore univoco |
title | string | Si | Titolo del film |
description | string | No | Descrizione o genere del film |
icon | string | No | Classe CSS dell'icona sovrapposta (es. 'pi pi-star') |
image | string | No | URL dell'immagine di sfondo (poster del film) |
color | 'indigo' | 'violet' | 'red' | 'green' | 'blue' | No | Colore del gradient overlay (default: 'blue') |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
click | MovieCardItem | Emesso al click sulla card con l'oggetto item completo |
Slot
Nessuno slot disponibile.
Esempi
Lista Film
Varianti Colore
Il color determina il tono del gradient overlay sull'immagine. Se non specificato, viene usato 'blue'.
TypeScript
import type { MovieCardProps, MovieCardItem } from '@pzeta/vue-components'
// Tipo dell'emit
// MovieCardEmits = (e: 'click', item: MovieCardItem) => void
const item: MovieCardItem = {
id: 'film-1',
title: 'Dune',
description: 'Epic Sci-Fi',
icon: 'pi pi-sun',
color: 'violet',
image: '/images/dune-poster.jpg',
}
const props: MovieCardProps = { item }