Componente
Collapse
Un pannello che si apre e si chiude da un pulsante o da un link: <details>/<summary> su daisyUI collapse, con l'animazione di altezza di daisyUI.
- Riferimento
<it-collapse>- Classi
ita-collapseita-collapse-borderedita-collapse-linkita-btnita-chevron- Basato su (daisyUI)
collapsecollapse-titlecollapse-content- Solo CSS
- Tastiera, stato aperto/chiuso annunciato e ricerca nella pagina (Ctrl+F apre il pannello che contiene il testo) sono di <details>. Il pulsante che comanda un pannello lontano (data-bs-target) non ha un equivalente senza script: il pannello segue sempre il suo <summary>.
- Storybook
- Apri le storie di Collapse
Esempio base
Mostra il contenuto
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Leggi i dettagli
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-6">
<details class="collapse ita-collapse">
<summary class="collapse-title">
<span class="ita-btn ita-btn-primary gap-2"><span>Mostra il contenuto</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>
<details class="collapse ita-collapse">
<summary class="collapse-title">
<span class="ita-collapse-link"><span>Leggi i dettagli</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>
</div>Aperto di default
Nascondi le istruzioni
Compila tutti i campi obbligatori, contrassegnati con l'asterisco, poi premi Invia.
Mostra il codice HTMLNascondi il codice HTML
<details class="collapse ita-collapse ita-collapse-bordered" open>
<summary class="collapse-title">
<span class="ita-btn ita-btn-primary ita-btn-outline gap-2"><span>Nascondi le istruzioni</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Compila tutti i campi obbligatori, contrassegnati con l'asterisco, poi premi Invia.</p></div>
</details>Con riquadro
Requisiti di accesso
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Mostra il codice HTMLNascondi il codice HTML
<details class="collapse ita-collapse ita-collapse-bordered">
<summary class="collapse-title">
<span class="ita-btn ita-btn-secondary gap-2"><span>Requisiti di accesso</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>Uno alla volta
Con lo stesso name, aprendone uno si chiudono gli altri.
Orari
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Contatti
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Come arrivare
Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-4">
<details class="collapse ita-collapse" name="sportello">
<summary class="collapse-title">
<span class="ita-collapse-link"><span>Orari</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>
<details class="collapse ita-collapse" name="sportello">
<summary class="collapse-title">
<span class="ita-collapse-link"><span>Contatti</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>
<details class="collapse ita-collapse" name="sportello">
<summary class="collapse-title">
<span class="ita-collapse-link"><span>Come arrivare</span><svg class="ita-chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 15.5 5.5 9 7 7.5l5 5 5-5L18.5 9z"/></svg></span>
</summary>
<div class="collapse-content"><p>Alcuni contenuti segnaposto per il componente collapse. Il pannello è nascosto di default e compare quando l'utente attiva il pulsante.</p></div>
</details>
</div>