Screenshot

Il componente Screenshot visualizza immagini consapevoli del tema che si alternano automaticamente tra le varianti chiara e scura quando l’utente cambia il tema del sito. Utilizzarlo ogni volta che è necessario mostrare screenshot dell’interfaccia utente che devono corrispondere alla combinazione di colori corrente del lettore.

Riferimento Props

Prop	Tipo	Obbligatorio	Descrizione
light	string	No	Percorso dell’immagine in modalità chiara
dark	string	No	Percorso dell’immagine in modalità scura
alt	string	Sì	Testo alternativo per l’accessibilità
width	number	No	Larghezza dell’immagine in pixel
height	number	No	Altezza dell’immagine in pixel

Nota

È necessario fornire almeno uno tra light e dark. Quando vengono forniti entrambi, il componente alterna tra di essi in base al tema attivo.

Modalità doppia (chiara + scura)

Fornire entrambe le props light e dark per mostrare la variante corretta per ciascun tema. Attivare il selettore del tema nell’angolo in alto a destra per vedere l’immagine cambiare.

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

Consiglio

Acquisire sempre gli screenshot sia in modalità chiara che scura quando si documenta l’interfaccia utente. In questo modo si offre ai lettori una rappresentazione accurata indipendentemente dalla loro preferenza di tema.

Immagine singola

Quando è disponibile una sola variante, passare solo light o dark. L’immagine viene visualizzata in entrambi i temi senza alternanza.

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

Con dimensioni

Utilizzare width e height per controllare la dimensione di rendering e prevenire lo spostamento del layout.

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

Come funziona

Il componente visualizza uno o due elementi <img> all’interno di un wrapper .screenshot-pair. Le regole CSS attivano la visibilità in base al tema attivo:

• Modalità scura (predefinita) — l’immagine .screenshot-light è nascosta tramite :root:not([data-theme="light"]) .screenshot-light \{ display: none \}
• Modalità chiara — l’immagine .screenshot-dark è nascosta tramite :root[data-theme="light"] .screenshot-dark \{ display: none \}

Selettori aggiuntivi gestiscono il wrapper starlight-image-zoom utilizzando :has() in modo che la funzionalità di zoom funzioni correttamente con entrambe le varianti.

Tutte le immagini degli screenshot ricevono uno stile coerente: un bordo sottile, angoli arrotondati e un’ombra che si intensifica al passaggio del cursore.

Confronto con le immagini Markdown

Funzionalità	Componente Screenshot	Markdown 
Alternanza consapevole del tema	Sì	No
Bordo e ombra con stile	Automatico	No
Effetto ombra al passaggio del cursore	Sì	No
Supporto zoom	Funziona con il plugin di zoom delle immagini	Funziona con il plugin di zoom delle immagini
Testo alternativo	Prop alt	![testo alternativo]()

Utilizzare il componente Screenshot quando si dispone di varianti di immagine specifiche per tema o si desidera l’aspetto stilizzato dello screenshot. Utilizzare le immagini Markdown standard per grafica inline, diagrammi o immagini che appaiono uguali in entrambi i temi.