Widgets

ClockWidget

Widget orologio decorativo in tempo reale con supporto formato 12/24h, visualizzazione data, varianti stilistiche e localizzazione personalizzabile.

Import

import { ClockWidget } from '@pzeta/vue-components'

Esempio Base

Il widget si aggiorna automaticamente ogni secondo e mostra ora (HH:MM:SS) e data corrente.

Props

Prop	Tipo	Default	Descrizione
`showDate`	`boolean`	`true`	Mostra la data sotto all'orario
`showSeconds`	`boolean`	`true`	Mostra i secondi nell'orario
`use24Hour`	`boolean`	`true`	Usa il formato 24 ore (false = 12h con AM/PM)
`variant`	`'default' \| 'primary' \| 'gradient' \| 'signboard'`	`'default'`	Variante stilistica del widget
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dimensione del widget
`locale`	`string`	`'it-IT'`	Locale per la formattazione
`dayNames`	`string[]`	`undefined`	Array personalizzato dei nomi dei giorni (sovrascrive i default i18n)
`monthNames`	`string[]`	`undefined`	Array personalizzato dei nomi dei mesi (sovrascrive i default i18n)

Emits

Evento	Payload	Descrizione
`tick`	`Date`	Emesso ogni secondo con la data/ora corrente

Slot

Nessuno slot disponibile.

Esempi

Configurazioni Base

Varianti

La variante signboard mostra ore, minuti e secondi su card separate ispirate agli orologi da stazione.

Dimensioni

Localizzazione

Se dayNames e monthNames non sono forniti, il widget usa le traduzioni configurate nel plugin i18n.

Evento Tick

TypeScript

import type { ClockWidgetProps } from '@pzeta/vue-components'

// Tipo dell'emit
// ClockWidgetEmits = (e: 'tick', value: Date) => void

const config: ClockWidgetProps = {
  showDate: true,
  showSeconds: false,
  use24Hour: false,
  variant: 'primary',
  size: 'lg',
  locale: 'it-IT',
}

Data

Componenti per visualizzazione e manipolazione dati — DataTable, TreeTable, Tree, DataView, Carousel, Image, Galleria, Timeline, Paginator, Chart, EventCalendar, Inplace, Knob, OrderList, PickList.

MovieCard

Card film in formato poster con immagine di sfondo, gradient overlay colorato, titolo, descrizione e icona cliccabile.