Styleguide

Liste draggable

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 .listToggle-content du composant liste toggle.

<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>

Composant avec élément de style alternatif

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

<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" 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>

Action de drag

1 - Le composant draggé reste en place et reçoit la classe d'état .is-dragging pendant la durée de l'action.

<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" role="button">Réservation (tous critères)</li>
  <li class="listDraggable-item is-dragging" 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>

2 - Au dragg de l'élément un clone est généré et reçoit la classe .is-clone pendant la durée de l'action.

<ul class="listDraggable">
  <li class="listDraggable-item listDraggable-item--alternate" role="button">Réservation (tous critères)</li>
  <li class="listDraggable-item is-clone" 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>