# TaskList

Eine Liste von Dingen zu tun oder zu folgen, jeder mit seinem Status, führend zum Element.

## Playground

```html
<ul class="feitio-task-list"><li><span class="name"><a class="feitio-link" href="#playground">Mietvertrag prüfen</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>Wartet</span></li><li><span class="name"><a class="feitio-link" href="#playground">Fotos ordnen</a></span><span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>In Arbeit</span></li><li><span class="name"><a class="feitio-link" href="#playground">Pflanzen gießen</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>Erledigt</span></li></ul>
```

## Wann verwenden

-   Für Aufgaben, Pläne oder Teile einer Arbeit, wenn was wichtig ist, der Name und Status jedes einzelnen.

## Wann nicht verwenden

-   **Viele Merkmale zum Vergleichen:** Tabelle.
-   **Eine Liste ohne Status** (nur Links): eine einfache Liste.

## Beispiele

### Aufgaben

Der Name führt zum Element; das Detail sagt wer und wann; der Status ist ein Tag, rechts.

Code anzeigen

```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.  **Name:** ein Link zum Element.
2.  **Detail**, optional: wer, wann.
3.  **Status:** ein Tag, rechts.

## Do and don't

Do

-   [Replace the photos](#exemplos)Late

Der Name führt zum Element; der Status wird auf einmal gelesen.

Don’t

-   **Fotos ersetzen**AnsehenBearbeitenAbschließen

Drei Links pro Reihe und kein Status: die Liste wird zu einer Schaltflächen-Panel.

## Schreiben

-   Name: die Aufgabe als Aktion ("Vertrag prüfen"), überall gleich.
-   Status: die üblichen Wörter ("Offen", "Im Gange", "Warten", "Erledigt").

## Barrierefreiheit

-   Es ist eine Liste (`<ul>`): Screenreader sagen, wie viele Elemente es gibt.
-   Der Status ist ein Wort, nicht nur eine Farbe.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-task-list"`

auf dem `<ul>`

Elemente mit Haarspuren, Name links und Status rechts.

`class="name"`

bei Name und Detail

Name in Fettdruck und kleines Detail.