Questo è un altro tag (o meglio, una coppia di tag) piuttosto dimenticati, nonostante siano disponibili su tutti i browser da qualche anno.
Supponiamo di voler presentere presentare una pagina piuttosto ordinata, con eventualmente la possibilità di vedere dettagli e annotazioni non necessari ad una prima lettura. Penseremo certamente al famoso triangolino che, cliccato, ruota su se stesso ed apre uno spazio in cui compaiono i dettagli. Si tratta di un'interfaccia a cui ci hanno abituati il Finder del Mac e l'Explorer di Windows, per non parlare di Linux.
In questi casi, bisognava costruire "a mano" quello che serviva: il triangolino (una figura) seguita dal titolo; una funzione javascript si occupava di impostare a visibile la regione nascosta (di solito un <div>) e di sostituire il triangolino con la sua versione "aperta"; un secondo click faceva il contrario, nascondendo la regione e riportando il triangolo nella posizione chiusa. Trattandosi di un click sullo stesso oggetto, la funzione doveva prima stabilire se la condizione iniziale fosse aperta o chiusa. Nulla di trascendentale, però si trattava comunque di un certo numero di righe da scrivere.
Dal 2020 con i maggiori browser conosciuti non è più necessario tutto questo giro: basta inserire il tag <details>, che si occupa di aprire e chiudere il suo contenuto e aggiornare l'immagine del triangolino. Il tag <summary> al suo interno presenta il titolo che dobbiamo cliccare per aprire e chiudere: il codice più semplice è il seguente:
Senza necessità di alcun javascript, questo codice porta al seguente effetto (cliccare sul triangolino):
Informazioni
Questa è l'informazione che viene mostrata.Il tag <summary> deve essere il primo a comparire all'interno del <detail>: se non c'è o non è il primo, il browser inserisce un suo default (di solito sarà qualcosa simile a Details).
Naturalmente, si possono poi stilare i componenti:
ottenendo come risultato:
Informazioni
Questa è l'informazione che viene mostrata.Come si vede, è possibile mostrare stili differenti usando il termine [open] per indicare la situazione di aperto. È anche possibile far partire la pagina con i dettagli aperti, introducendo l'attributo open (se si vuole che parta chiuso, non lo si mette e basta: open = false non funziona!).
Ogni volta che un <summary> viene cliccato e quindi viene cambiato lo stato open/close, viene generato un evento toggle, che possiamo usare per aggiungere azioni.
Inoltre, possiamo creare una lista di tag <details> e se tutti hanno lo stesso attributo name="xyz", allora il broser si occupa anche di mostrare aperto solo uno della lista: cliccando su uno chiuso, questo viene aperto ed il precedente viene chiuso, tutto in automatico.
Ultima cosa: il tag <summary> viene preparato come un elemento di una lista (display:list-item), per cui è possibile usare le proprietà conseguenti per esempio per inserire icone diverse dal triangolino. Però non è possibile inserire l'animazione di apertura/chiusura, che col metodo vecchio veniva aggiunta tramite javascript.
Nessun commento:
Posta un commento