La lista è un componente flessibile per la visualizzazione di liste con testo, link o elementi correlati.
Tipologie di lista
Le liste, costituite da tag <ul> con classe .it-list all’interno di un wrapper con classe .it-list-wrapper, possono contenere testi, link, icone, avatar, immagini o una combinazione di questi elementi.
Per avere una lista che permetta paragrafi di testo aggiuntivo per ogni elemento, bisogna utilizzare un approccio con titolo (heading) e paragrafo <p>, mantenendo la classe .text per l’elementi titolo. Entrambi devono essere inclusi in un elemento <div> per il corretto allineamento.
<divclass="it-list-wrapper"><ulclass="it-list"><li><divclass="list-item"><divclass="it-right-zone"><div><h4class="text m-0">Testo</h4><pclass="small m-0">Lorem ipsum dolor sit amet.</p></div><spanclass="it-multiple"><spanclass="metadata">metadata testo</span><ahref="#"aria-label="Testo - Azione 1"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Testo - Azione 2"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Testo - Azione 3"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a></span></div></div></li><li><divclass="list-item"><divclass="it-right-zone"><div><h4class="text m-0">Testo</h4><pclass="small m-0">Lorem ipsum dolor sit amet.</p></div><spanclass="it-multiple"><spanclass="metadata"><ahref="#">metadata link</a></span><ahref="#"aria-label="Testo 2 - Azione 1"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Testo 2 - Azione 2"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Testo 2 - Azione 3"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a></span></div></div></li><li><divclass="list-item"><divclass="it-right-zone"><div><h4class="text m-0"><ahref="#">Link</a></h4><pclass="small m-0">Lorem ipsum dolor sit amet.</p></div><spanclass="it-multiple"><spanclass="metadata"><ahref="#">metadata link</a></span><ahref="#"aria-label="Link - Azione 1"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Link - Azione 2"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Link - Azione 3"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a></span></div></div></li><li><divclass="list-item"><divclass="it-right-zone"><div><h4class="text m-0"><ahref="#">Link</a></h4><pclass="small m-0">Lorem ipsum dolor sit amet.</p></div><spanclass="it-multiple"><spanclass="metadata">metadata testo</span><ahref="#"aria-label="Link - Azione 1"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Link - Azione 2"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a><ahref="#"aria-label="Link - Azione 3"><svgclass="icon"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></a></span></div></div></li></ul></div>
Liste per menu di navigazione
Le liste per menu di navigazione, costituite da tag <ul> con classe .link-list all’interno di un wrapper con classe .link-list-wrapper, vengono utilizzate per creare le voci dei menu Dropdown, Megamenu, Sidebar e Navscroll.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li></ul></div>
Elemento con stato attivo
Per rendere attivo un elemento è sufficiente aggiungere la classe .active al relativo link.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item active"href="#"><span>Link lista 2 attivo</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li></ul></div>
Elemento con stato disabilitato
Per disabilitare un elemento è sufficiente aggiungere la classe .disabled al relativo link.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item disabled"href="#"aria-disabled="true"><span>Link lista 2 disabilitato</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li></ul></div>
Intestazione e divisore
Le liste di link possono avere un’intestazione (con o senza link) e/o divisori per separare gruppi di link.
L’intestazione è costituita dall’elemento .link-list-heading che precede il tag <ul>.
Il divisore è costituito dal tag <span> con classe .divider e attributo role="separator" all’interno del tag <li>.
<divclass="link-list-wrapper"><h4class="link-list-heading">Intestazione senza link</h4><ulclass="link-list"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"role="separator"></span></li><li><aclass="list-item"href="#"><span>Link lista 4</span></a></li></ul></div>
<divclass="link-list-wrapper"><h4class="link-list-heading"><ahref="#">Intestazione con link</a></h4><ulclass="link-list"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"role="separator"></span></li><li><aclass="list-item"href="#"><span>Link lista 4</span></a></li></ul></div>
Dimensioni
Per ogni elemento di una lista di link è possibile definire una variante di dimensione maggiore utilizzando la classe .large applicata al tag <a>.
<divclass="link-list-wrapper"><h4class="link-list-heading">Intestazione</h4><ulclass="link-list"><li><aclass="list-item large"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item large"href="#"><span>Link lista 2</span></a></li><li><aclass="list-item large"href="#"><span>Link lista 3</span></a></li><li><spanclass="divider"role="separator"></span></li><li><aclass="list-item large"href="#"><span>Link lista 4</span></a></li></ul></div>
Multiline con icona
Ogni elemento di una lista di link può avere un’icona (a destra o sinistra del testo) ed un abstract.
Per includere un’icona bisogna aggiungere al tag <a> una delle seguenti classi:
icon-right: se si vuole posizionare l’icona a destra del testo
icon-left: se si vuole posizionare l’icona a sinistra del testo
All’interno del tag <span class="list-item-title-icon-wrapper"> subito dopo lo <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.
<divclass="link-list-wrapper multiline"><ulclass="link-list"><li><aclass="list-item active icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><h4class="list-item-title">Link lista 1 attivo</h4><svgclass="icon icon-primary"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a></li><li><spanclass="divider"role="separator"></span></li><li><aclass="list-item icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><h4class="list-item-title">Link lista 2</h4><svgclass="icon icon-primary"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a></li><li><spanclass="divider"></span></li><li><aclass="list-item disabled icon-right"href="#"aria-disabled="true"><spanclass="list-item-title-icon-wrapper"><h4class="list-item-title">Link lista 3 disabilitato</h4><svgclass="icon icon-primary"><title>Codice</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg></span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a></li><li><spanclass="divider"></span></li></ul></div>
Lista con controlli
Le liste di link con controlli sono caratterizzate da icone a destra e sinistra del testo.
Quella di destra è descrittiva mentre quella di sinistra può essere un’eventuale azione aggiuntiva da gestire in Javascript.
È necessario aggiungere al tag <a> la classe .icon-right se si vuole posizionare l’icona a destra del testo, oppure la classe .icon-left se si vuole posizionare l’icona a sinistra del testo.
Azione primaria
Icona a sinistra
All’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.
Per posizionare correttamente l’icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item active icon-left"href="#"><spanclass="list-item-title-icon-wrapper"><svgclass="icon icon-primary"><title>Freccia destra</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg><spanclass="list-item-title">Link lista 1 attivo</span></span></a></li><li><aclass="list-item icon-left"href="#"><spanclass="list-item-title-icon-wrapper"><svgclass="icon icon-primary"><title>Freccia destra</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg><spanclass="list-item-title">Link lista 2</span></span></a></li><li><aclass="list-item icon-left disabled"href="#"aria-disabled="true"><spanclass="list-item-title-icon-wrapper"><svgclass="icon icon-primary"><title>Freccia destra</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-chevron-right"></use></svg><spanclass="list-item-title">Link lista 3 disabilitato</span></span></a></li></ul></div>
Azione secondaria
Icona a destra
All’interno del tag <span class="list-item-title-icon-wrapper"> subito dopo il tag <span class="list-item-title"> contenente il testo, puoi inserire l’icona necessaria.
Per posizionare correttamente l’icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item active icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 1 attivo</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li><li><aclass="list-item icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 2</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li><li><aclass="list-item icon-right disabled"href="#"aria-disabled="true"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 3 disabilitato</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li></ul></div>
Azioni primaria e secondaria
Icona a sinistra
Per aggiungere un’icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left.
Inserisci l’icona all’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo.
Icona a destra
Per aggiungere un’icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right.
Inserisci l’icona all’interno del tag <span class="list-item-title-icon-wrapper"> subito prima del tag <span class="list-item-title"> contenente il testo.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item active icon-left"href="#"><spanclass="list-item-title-icon-wrapper"><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="list-item-title">Link lista 1 attivo</span></span></a></li><li><aclass="list-item icon-left"href="#"><spanclass="list-item-title-icon-wrapper"><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg><spanclass="list-item-title">Link lista 2</span></span></a></li><li><aclass="list-item disabled icon-right"href="#"aria-disabled="true"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 3 disabilitato con icona a destra</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li></ul></div>
Lista con toggle
Una lista di link può contenere anche elementi appartenenti ai form, di seguito un esempio contenente un toggle.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<divclass="link-list-wrapper"><ulclass="link-list"><li><divclass="toggles"><labelfor="toggle1">Label per toggle
<inputtype="checkbox"id="toggle1"><spanclass="lever"></span></label></div></li><li><divclass="toggles"><labelfor="toggle2">Label per toggle disabilitato
<inputtype="checkbox"id="toggle2"disabledaria-disabled="true"><spanclass="lever"></span></label></div></li></ul></div>
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item large medium icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 1</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li><li><aclass="list-item large medium icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 2</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a><ulclass="link-sublist"id=""><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 2</span></a></li><li><aclass="list-item"href="#"><span>Link lista 3</span></a></li></ul></li><li><aclass="list-item large medium icon-right"href="#"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 3</span><svgclass="icon icon-primary"><title>Link</title><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-link"></use></svg></span></a></li></ul></div>
Collassabile
Di seguito un esempio di navigazione annidata collassabile.
Per questo tipo di link list sono state utilizzate, oltre alle classi custom, le classi e gli attributi di Bootstrap per l’attivazione del comportamento collapse.
<divclass="link-list-wrapper"><ulclass="link-list"><li><aclass="list-item large medium icon-right"href="#collapseOne"role="button"data-bs-toggle="collapse"aria-expanded="false"aria-controls="collapseOne"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 1</span><svgclass="icon icon-primary"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use></svg></span></a><ulclass="link-sublist collapse"id="collapseOne"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li></ul></li><li><aclass="list-item large medium icon-right"href="#collapseTwo"role="button"data-bs-toggle="collapse"aria-expanded="false"aria-controls="collapseTwo"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 2</span><svgclass="icon icon-primary"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use></svg></span></a><ulclass="link-sublist collapse"id="collapseTwo"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li></ul></li><li><aclass="list-item large medium icon-right"href="#collapseThree"role="button"data-bs-toggle="collapse"aria-expanded="false"aria-controls="collapseThree"><spanclass="list-item-title-icon-wrapper"><spanclass="list-item-title">Link lista 3</span><svgclass="icon icon-primary"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use></svg></span></a><ulclass="link-sublist collapse"id="collapseThree"><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li><li><aclass="list-item"href="#"><span>Link lista 1</span></a></li></ul></li></ul></div>
Breaking change
Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".
Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:
L’elemento .link-list-heading è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
L’elemento .list-item-title è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:
L’elemento .text è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.