TaskList

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

Auf dieser Seite

Playground

Mietvertrag prüfenWartet
Fotos ordnenIn Arbeit
Pflanzen gießenErledigt

Detail

Hintergrund

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

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

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

Review the contractDue Nov 10Waiting

Name: ein Link zum Element.
Detail, optional: wer, wann.
Status: ein Tag, rechts.

Do and don't

Replace the photosLate

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

Don’t

Fotos ersetzenAnsehenBearbeitenAbschließ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").

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.