Widgets
RestaurantCard
Card ristorante con immagine di sfondo a piena copertura, titolo e descrizione sovrapposti, cliccabile.
Import
import { RestaurantCard } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
item | RestaurantCardItem | Si | Oggetto con i dati del ristorante da visualizzare |
RestaurantCardItem
| Campo | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
id | string | number | Si | Identificatore univoco |
title | string | Si | Nome del ristorante |
description | string | No | Descrizione o tipo di cucina |
image | string | No | URL dell'immagine di sfondo della card |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
click | RestaurantCardItem | Emesso al click sulla card con l'oggetto item completo |
Slot
Nessuno slot disponibile.
Esempi
Griglia di Ristoranti
Senza Immagine
Se image non è fornita, la card viene visualizzata senza sfondo fotografico. La description e il title rimangono visibili nel pannello sovrapposto.
TypeScript
import type { RestaurantCardProps, RestaurantCardItem } from '@pzeta/vue-components'
// Tipo dell'emit
// RestaurantCardEmits = (e: 'click', item: RestaurantCardItem) => void
const item: RestaurantCardItem = {
id: 'ristorante-1',
title: 'Trattoria del Porto',
description: 'Pesce fresco',
image: '/images/trattoria.jpg',
}
const props: RestaurantCardProps = { item }