# TaskList

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

## Playground

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

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

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

## Hacer y no hacer

Do

-   [Replace the photos](#exemplos)Late

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

Don’t

-   **Reemplazar las fotos**Versió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").

## Accesibilidad

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