<summary>: l'elemento "Riepilogo divulgazione"
L'elemento HTML <summary>
specifica un riepilogo, una didascalia o una legenda per la finestra di divulgazione di un elemento <details>
. Facendo clic sull'elemento <summary>
si alterna lo stato dell'elemento <details>
padre aperto e chiuso.
Note d'uso
Il contenuto dell'elemento <summary>
può essere qualsiasi contenuto di intestazione, testo normale o HTML che può essere utilizzato all'interno di un paragrafo.
Un elemento <summary>
può essere utilizzato solo come primo figlio di un elemento <summary>
. Quando l'utente fa clic sul riepilogo, l'elemento <details>
padre viene aperto o chiuso, quindi viene inviato un evento toggle
all'elemento <details>
, che può essere utilizzato per informarti quando si verifica questo cambiamento di stato.
Testo etichette predefinito
Se il primo figlio di un elemento <details>
non è un elemento <summary>
, l'interprete utilizzerà una stringa predefinita (tipicamente "Dettagli") come etichetta per la finestra di divulgazione.
Stile predefinito
Secondo la specifica HTML, lo stile predefinito per gli elementi <summary>
include display: list-item
. Ciò consente di modificare o rimuovere l'icona visualizzata come widget di divulgazione accanto all'etichetta dall'impostazione predefinita, che in genere è un triangolo.
Puoi anche cambiare lo stile in display: block
per rimuovere il triangolo di apertura.
Per i browser basati su Webkit, come Safari, è possibile controllare la visualizzazione delle icone tramite lo pseudo-elemento CSS non standard ::-webkit-details-marker
. Per rimuovere il triangolo di apertura, utilizzare summary::-webkit-details-marker { display: none }
.
Esempi
Di seguito sono riportati alcuni esempi di utilizzo dell'elemento <summary>
. Puoi trovare altri esempi nella documentazione dell'elemento <details>
.
Esempio di base
Un semplice esempio che mostra l'uso di <summary>
in un elemento <details>
:
<details open>
<summary>Panoramica</summary>
<ol>
<li>Contanti in cassa: $ 500,00</li>
<li>Fattura attuale: $ 75,00</li>
<li>Data di scadenza: 06/06/2022</li>
</ol>
</details>