Styleguide

Liste Toggle

Ajouté à la version :

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du composant

---

Composant de base

Ce composant est initialement prévu pour avoir comme parent l'élément .module-body-sidebar du composant module.

La classe .is-active sur les éléments .listToggle-link permet d'en afficher le contenu.

<ul class="listToggle" data-depth="1">
  <li class="listToggle-item">
   <div class="listToggle-link is-active" role="button">
      <span class="icon icon--next"></span> Critères CRM
    </div>
    <div class="listToggle-content">
      <ul class="listToggle" data-depth="2">
        <li class="listToggle-item">
          <div class="listToggle-link is-active" role="button">
            <span class="icon icon--next"></span> Lorem ipsum dolor sit
          </div>
          <div class="listToggle-content">
            <ul class="listDraggable">
              <li class="listDraggable-item" role="button">Réservation (tous critères)</li>
              <li class="listDraggable-item" role="button">Destination de la réservation</li>
              <li class="listDraggable-item" role="button">Date de la réservation</li>
              <li class="listDraggable-item" role="button">Montant de la réservation</li>
            </ul>
          </div>
        </li>
        <li class="listToggle-item">
          <div class="listToggle-link" role="button">
            <span class="icon icon--next"></span> Réservations
          </div>
          <div class="listToggle-content">
            <ul class="listDraggable">
              <li class="listDraggable-item" role="button">Réservation (tous critères)</li>
              <li class="listDraggable-item" role="button">Destination de la réservation</li>
              <li class="listDraggable-item" role="button">Date de la réservation</li>
              <li class="listDraggable-item" role="button">Montant de la réservation</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Composant de style alternate

Ajouter la classe de modification .listToggle-item--alternate à l'élément ayant la classe .listToggle-item afin de modifier son style.

Il est également possible d'ajouter un icône en utilisant le composant d'icône.

<ul class="listToggle" data-depth="1">
  <li class="listToggle-item listToggle-item--alternate">
    <div class="listToggle-link is-active" role="button">
      <span class="icon icon--next"></span>
      <span class="icon icon--world"></span> Critères DMP
    </div>
    <div class="listToggle-content">
      <ul class="listToggle" data-depth="2">
        <li class="listToggle-item">
          <div class="listToggle-link is-active" role="button">
            <span class="icon icon--next"></span> Lorem ipsum dolor
          </div>
          <div class="listToggle-content">
            <ul class="listDraggable">
              <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
              <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
            </ul>
          </div>
        </li>
        <li class="listToggle-item">
          <div class="listToggle-link" role="button">
            <span class="icon icon--next"></span> Réservations
          </div>
          <div class="listToggle-content">
            <ul class="listDraggable">
              <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
              <li class="listDraggable-item" role="button">lorem ipsum dolor</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>