TaskList

Una lista de cosas por hacer o seguir, cada una con su estado, que lleva al elemento.

En esta página

Playground

Revisar el contrato de alquilerEsperando
Organizar las fotosHaciendo
Regar las plantasTerminada

Detalle

Fondo

HTML

<ul class="feitio-task-list"><li><span class="name"><a class="feitio-link" href="#playground">Revisar el contrato de alquiler</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>Esperando</span></li><li><span class="name"><a class="feitio-link" href="#playground">Organizar las fotos</a></span><span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Haciendo</span></li><li><span class="name"><a class="feitio-link" href="#playground">Regar las plantas</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>Terminada</span></li></ul>

Cuándo usarlo

Para tareas, calendarios o partes de un trabajo, cuando lo importante es el nombre y el estado de cada uno.

Cuándo no usarlo

Varias características para comparar: Tabla.
Una lista sin estado (solo enlaces): una lista simple.

Ejemplos

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

Tareas

El nombre lleva al elemento; el detalle dice quién y cuándo; el estado es una Etiqueta, a la derecha.

Mostrar código

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>

Anatomía

Review the contractDue Nov 10Waiting

Nombre: un enlace al elemento.
Detalle, opcional: quién, cuándo.
Estado: una Etiqueta, a la derecha.

Hacer y no hacer

Replace the photosLate

El nombre lleva al elemento; el estado se lee de un vistazo.

Don’t

Reemplazar las fotosVersiónEditarCompletar

Tres enlaces por fila y sin estado: la lista se convierte en un panel de botones.

Escritura

Nombre: la tarea como una acción ("Revisar el contrato"), igual en todas partes.
Estado: las palabras usuales ("Abierto", "En proceso", "Esperando", "Terminado").

Es una lista (<ul>): los lectores de pantalla dicen cuántos elementos hay.
El estado es una palabra, no solo un color.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-task-list"`	en el `<ul>`	Elementos con bordes sutiles, nombre a la izquierda y estado a la derecha.
`class="name"`	sobre nombre y detalle	Nombre en negrita y pequeño detalle.