Widgets
WeatherCard
Card meteo che visualizza le previsioni giornaliere con temperatura, condizione atmosferica e icona dinamica.
Import
import { WeatherCard } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
days | WeatherCardDay[] | [] | Array delle previsioni giornaliere da visualizzare |
scrollable | boolean | true | Abilita lo scroll orizzontale quando le card superano la larghezza del contenitore |
WeatherCardDay
| Campo | Tipo | Obbligatorio | Descrizione |
|---|---|---|---|
id | string | number | Si | Identificatore univoco del giorno |
name | string | Si | Nome del giorno da visualizzare (es. 'Lun', 'Monday') |
temperature | number | Si | Valore della temperatura |
unit | 'C' | 'F' | No | Unità di misura della temperatura (default visualizzato: 'F') |
weather | 'sunny' | 'cloudy' | 'rainy' | 'stormy' | Si | Condizione atmosferica — determina l'icona visualizzata |
Emits
Nessun evento emesso.
Slot
Nessuno slot disponibile.
Esempi
Previsioni Settimanali
Temperature in Celsius
Senza Scroll
TypeScript
import type { WeatherCardProps, WeatherCardDay } from '@pzeta/vue-components'
const giorno: WeatherCardDay = {
id: 1,
name: 'Lunedì',
temperature: 22,
unit: 'C',
weather: 'sunny',
}
const props: WeatherCardProps = {
days: [giorno],
scrollable: true,
}