Layout

PageHeader

Intestazione di pagina standard per gli MFE montati dalla shell — titolo con icona brand, sottotitolo e slot azioni. Theme-aware, senza background proprio.

Import

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

A cosa serve

Ogni vista di ogni MFE caricato dalla shell apre con la stessa intestazione. PageHeader incapsula quello standard così non va ricopiato — e non va riscritto ogni volta che cambia.

Regole che il componente applica per te:

Titolo text-xl font-semibold, palette slate (non gray), con icona brand text-blue-600.
Sottotitolo text-sm, sempre presente quando c'è qualcosa da dire.
Wrapper p-4 e background trasparente: eredita quello della shell, non ne impone uno proprio.
Nessun breadcrumb: lo rende la shell sopra il MFE. Non aggiungerne uno interno.

Props

Prop	Tipo	Default	Descrizione
`title`	`string`	`''`	Titolo della pagina, reso come `<h1>`. Obbligatorio salvo uso dello slot `title`
`subtitle`	`string`	`''`	Sottotitolo descrittivo sotto il titolo
`icon`	`string`	`''`	Icona brand come classe PrimeIcons completa (es. `pi pi-percentage`)
`padded`	`boolean`	`true`	Applica il wrapper `p-4`. Disattivare se la view ha già un contenitore con padding
`class`	`string`	`''`	Classe CSS aggiuntiva sul wrapper

Slot

Slot	Scope	Descrizione
`title`	—	Override del titolo, per markup ricco (badge, contatori)
`subtitle`	—	Override del sottotitolo
`actions`	—	Azioni allineate a destra del titolo. Se vuoto non altera il layout

Esempi

Con azioni a destra

Il caso tipico di una vista lista: titolo a sinistra, call to action a destra.

Senza sottotitolo

Quando il titolo basta, il margine inferiore passa automaticamente al titolo: l'intestazione non resta incollata al contenuto.

Dentro una view che ha già un padding

Accessibilità

Il titolo è un <h1>: una sola istanza di PageHeader per vista, in cima alla pagina.

L'icona è decorativa e viene esposta con aria-hidden="true" — il titolo testuale la descrive già, quindi gli screen reader non la annunciano. Per questo l'icona non deve mai veicolare informazione che non sia anche nel titolo.

TypeScript

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

Fieldset

Wrapper HTML fieldset con legenda personalizzabile, funzionalità di toggle collassabile (v-model) e slot per icona toggle personalizzata.

Panel

Contenitore collassabile con header, body e footer. Supporta toggle con v-model, slot per icone aggiuntive e dimensioni configurabili.