TaskList

Une liste de choses à faire ou suivre, chacune avec son statut, menant vers l'élément.

Sur cette page

Playground

Relire le bailEn attente
Ranger les photosEn cours
Arroser les plantesTerminée

Détail

Fond

HTML

<ul class="feitio-task-list"><li><span class="name"><a class="feitio-link" href="#playground">Relire le bail</a></span><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>En attente</span></li><li><span class="name"><a class="feitio-link" href="#playground">Ranger les photos</a></span><span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>En cours</span></li><li><span class="name"><a class="feitio-link" href="#playground">Arroser les plantes</a></span><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>Terminée</span></li></ul>

Quand l'utiliser

Pour les tâches, les calendriers ou les parties d'un travail, ce qui compte est le nom et le statut de chacun.

Quand ne pas l'utiliser

Plusieurs caractéristiques à comparer : Tableau.
Une liste sans statut (seulement des liens) : une liste simple.

Exemples

Review the leaseDue Nov 10Waiting
Organize the photosIn progressDoing
Water the plantsDone on Nov 7Done

Tâches

Le nom mène vers l'élément ; le détail indique qui et quand ; le statut est un Tag, à droite.

Afficher le code

HTML

<ul class="feitio-task-list">
  <li>
    <span class="name"><a class="feitio-link" href="/tarefas/1">Revisar o contrato</a><small>Prazo 10 nov</small></span>
    <span class="feitio-tag" data-status="warn">…Esperando</span>
  </li>
</ul>

Anatomie

Review the contractDue Nov 10Waiting

Nom : un lien vers l'élément.
Détail, optionnel : qui, quand.
Statut : un Tag, à droite.

Faire et ne pas faire

Replace the photosLate

Le nom mène vers l'élément ; le statut se lit d'un coup.

Don’t

Remplacer les photosVoirModifierTerminer

Trois liens par ligne et aucun statut : la liste devient un panneau de boutons.

Écriture

Nom : la tâche comme une action (« Examiner le contrat »), identique partout.
Statut : les mots usuels (« Ouvert », « En cours », « En attente », « Terminé »).

Il s'agit d'une liste (<ul>) : les lecteurs d'écran indiquent le nombre d'éléments.
Le statut est un mot, pas seulement une couleur.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-task-list"`	sur le `<ul>`	Élément avec des bordures fines, nom à gauche et statut à droite.
`class="name"`	sur le nom et les détails	Nom en gras et détail en petit.