# TaskList

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

## Playground

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

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

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

## Faire et ne pas faire

Do

-   [Replace the photos](#exemplos)Late

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

Don’t

-   **Remplacer les photos**VoirModifierTerminer

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é »).

## Accessibilité

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