Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Liste di link

Liste di link

I Link List sono un componente flessibile e potente per la visualizzazione di una serie di link o call to action.

Esempi

Single line

<div class="link-list-wrapper">
  <ul class="link-list">
     <li><a class="list-item" href="#"><span>Link list 1</span></a></li>
     <li><a class="list-item" href="#"><span>Link list 2</span></a></li>
     <li><a class="list-item" href="#"><span>Link list 3</span></a></li>
  </ul>
</div>

Single line - elemento con stato attivo

Per determinare l’elemento attivo è sufficiente aggiungere la classe .active al relativo link

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link list 1</span></a>
    </li>
    <li>
      <a class="list-item active" href="#"><span>Link list 2 active</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link list 3</span></a>
    </li>
  </ul>
</div>

Single line - elemento con stato disabilitato

Per disabilitare un elemento attivo è sufficiente aggiungere la classe .disabled al relativo link

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <a class="list-item" href="#"><span>Link list 1</span></a>
    </li>
    <li>
      <a class="list-item disabled" href="#"><span>Link list 2 disabled</span></a>
    </li>
    <li>
      <a class="list-item" href="#"><span>Link list 3</span></a>
    </li>
  </ul>
</div>

Single line con header e divider

I link list possono avere un header (con o senza link) e/o divisori per separare gruppi di link
L’header è costituito dall’elemento <h3> all’interno del tag <li>
Il separatore è costituito dal tag <span> con classe .divider all’interno del tag <li>

Heading senza link

<div class="link-list-wrapper">
   <ul class="link-list">
      <li>
         <h3 id="heading-senza-link">Heading senza link</h3>
      </li>
      <li>
        <a class="list-item" href="#"><span>Link list 1</span></a>
      </li>
      <li>
        <a class="list-item" href="#"><span>Link list</span></a>
      </li>
      <li>
        <a class="list-item" href="#"><span>Link list 3</span></a>
      </li>
      <li>
        <span class="divider"></span>
      </li>
      <li>
        <a class="list-item" href="#"><span>Link list 4</span></a>
      </li>
   </ul>
</div>

Heading con link

<div class="link-list-wrapper">
   <div class="link-list-wrapper">
      <ul class="link-list">
        <li>
          <h3 id="heading-con-link"><a href="#">Heading con link</a></h3>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 3</span></a>
        </li>
        <li><span class="divider"></span>
        </li>
        <li><a class="list-item" href="#"><span>Link list 4</span></a>
        </li>
      </ul>
    </div>
</div>

Sizing

Per ogni elemento link list è possibile definire una variante di dimensione maggiore utilizzando la classe .large applicata al tag <a>.

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <h3 id="heading">Heading</h3>
    </li>
    <li><a class="list-item large" href="#"><span>Link list 1</span></a>
    </li>
    <li><a class="list-item large" href="#"><span>Link list</span></a>
    </li>
    <li><a class="list-item large" href="#"><span>Link list 3</span></a>
    </li>
    <li><span class="divider"></span>
    </li>
    <li><a class="list-item large" href="#"><span>Link list 4</span></a>
    </li>
  </ul>
</div>

Multiline

Ogni elemento link list può avere un icona (a destra o sinistra del testo) ed un abstract.

Icone
Per aggiungere un icona bisogna aggiungere al tag <a> la 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 <a> subito dopo lo <span> contenente il testo, puoi inserire il tag svg necessario (per maggiori informazioni consulta la sezione icone).

<div class="link-list-wrapper multiline">
  <ul class="link-list">
    <li><a class="list-item active icon-right" href="#">
        <span>Link list 1 active</span>
        <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a>
    </li>
    <li><span class="divider"></span>
    </li>
    <li><a class="list-item icon-right" href="#">
        <span>Link list 1</span>
        <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a>
    </li>
    <li><span class="divider"></span>
    </li>
    <li><a class="list-item disabled icon-right" href="#">
        <span>Link list 1 disabled</span>
        <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p></a>
    </li>
    <li><span class="divider"></span>
    </li>
  </ul>
</div>

Lista con controlli

I link list con controlli sono caratterizzati da icone a destra e sinistra del testo
Quella di destra descrittiva e quella di sinistra un eventuale azione aggiuntiva da gestire in Javascript.

Per aggiungere un’icona è possibile 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

Primary Action

Icona sinistra

All’interno del tag <a> subito prima dello <span> contenente il testo, puoi inserire il tag svg necessario Per posizionare correttamente l’icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item active icon-left" href="#">
        <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
        <span>Link list 1 active</span>
    </a></li>
    <li><a class="list-item icon-left" href="#">
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
      <span>Link list 1</span>
    </a></li>
    <li><a class="list-item disabled icon-left" href="#">
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg>
      <span>Link list 1 disabled</span>
    </a></li>
  </ul>
</div>

Secondary Action

Icona destra
Per aggiungere un icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right

All’interno del tag <a> subito dopo lo <span> contenente il testo, puoi inserire il tag svg.

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item active icon-right" href="#">
      <span>Link list 1 active</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
    </a></li>
    <li><a class="list-item icon-right" href="#">
      <span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
    </a></li>
    <li><a class="list-item disabled icon-right" href="#">
      <span>Link list 1 disabled</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
    </a></li>
  </ul>
</div>

Primary e Secondary Action

Icona destra
Per aggiungere un icona a destra del testo bisogna aggiungere al tag <a> la classe: .icon-right

All’interno del tag <a> subito dopo lo <span> contenente il testo, andremo ad inserire l’icona e l’SVG con .it-(classe icona) per determinare quale icona inserire.

Icona sinistra
Per aggiungere un icona a sinistra del testo bisogna aggiungere al tag <a> la classe: .icon-left

All’interno del tag <a> subito prima dello <span> contenente il testo, andremo ad inserire l’icona e l’SVG con .it-(classe icona) per determinare quale icona inserire.

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item active icon-left" href="#">
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
      <span>Link list 1 active</span></a>
    </li>
    <li><a class="list-item icon-left" href="#">
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
      <span>Link list 1</span></a>
    </li>
    <li><a class="list-item disabled icon-right" href="#">
      <span>Link list 1 disabled con icona a destra</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg></a>
    </li>
  </ul>
</div>

List con switch

Un link list può contenere anche elementi form, si seguito un esempio contenente uno switch generato da un <input type="checkbox">

 <div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <div class="toggles">
        <label for="toggle1">Label per toggle
          <input type="checkbox" id="toggle1"><span class="lever"></span>
        </label>
      </div>
    </li>
    <li>
      <div class="toggles">
        <label for="toggle2">Label per disabled toggle
          <input type="checkbox" id="toggle2" disabled><span class="lever"></span>
        </label>
      </div>
    </li>
  </ul>
</div>

List con checkbox

Di seguito un esempio di link list contenente un <input type="checkbox"> standard.

<div class="link-list-wrapper">
  <ul class="link-list">
    <li>
      <div class="form-check form-check-group" aria-describedby="">
        <input type="checkbox" id="checkbox6" checked>
        <label for="checkbox6">Checkbox selezionato</label>
      </div>
    </li>
    <li>
      <div class="form-check form-check-group" aria-describedby="">
        <input type="checkbox" id="checkbox7">
        <label for="checkbox7">Checkbox non selezionato</label>
      </div>
    </li>
    <li>
      <div class="form-check form-check-group disabled" aria-describedby="">
        <input type="checkbox" id="checkbox8" disabled>
        <label for="checkbox8">Checkbox disabilitato non selezionato</label>
      </div>
    </li>
  </ul>
</div>

Liste innestate

Le liste di link possono contenere link con sottosezioni espanse o collassabili.

Fixed

Di seguito un esempio di navigazione annidiata espansa di default.

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item large medium icon-right" href="#"><span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg>
      </a>
    </li>
    <li><a class="list-item large medium icon-right" href="#"><span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg></a>
      <ul class="link-sublist" id="">
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
      </ul>
    </li>
    <li><a class="list-item large medium icon-right" href="#"><span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg></a>
    </li>
  </ul>
</div>

Collapsable

Di seguito un esempio di navigazione annidiata 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”
La documentazione è consultabile qui:
/bootstrap-italia/1.x/docs/componenti/collapse/#accordion

<div class="link-list-wrapper">
  <ul class="link-list">
    <li><a class="list-item large medium icon-right" href="#collapseOne" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
      <span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
      <ul class="link-sublist collapse" id="collapseOne">
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
      </ul>
    </li>
    <li><a class="list-item large medium icon-right" href="#collapseTwo" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
      <span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
      <ul class="link-sublist collapse" id="collapseTwo">
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
      </ul>
    </li>
    <li><a class="list-item large medium icon-right" href="#collapseThree" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
      <span>Link list 1</span>
      <svg class="icon icon-primary"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg></a>
      <ul class="link-sublist collapse" id="collapseThree">
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
        <li><a class="list-item" href="#"><span>Link list 1</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>