# Lista de barras

Compara unos pocos valores con una lista de nombres, cifras y barras, mediante el elemento meter nativo.

### Problemas conocidos
No se conocen problemas.

### Copiar el marcado
Una hoja de estilos de `@luz-ds/catalog`: enlaza `components/bar-list.css` después de `luz.css`.

Bar list markup
```html
<figure class="luz-bar-list">
  <ul class="luz-bar-list__rows">
    <li class="luz-bar-list__row">
      <span class="luz-bar-list__name">Sevilla to Madrid</span>
      <span class="luz-bar-list__figure">1,204</span>
      <meter class="luz-bar-list__meter" max="1500" value="1204" aria-hidden="true">1,204 of 1,500</meter>
    </li>
  </ul>
  <figcaption>Parcels per route, this week</figcaption>
</figure>
```

La variante en celdas, como la usa la página de inicio para los tamaños:

Bar list in cells markup
```html
<figure class="luz-bar-list luz-bar-list--cells">
  <ul class="luz-bar-list__rows" aria-label="Pages by size">
    <li class="luz-bar-list__row">
      <span class="luz-bar-list__name">Home</span>
      <span class="luz-bar-list__figure"><strong>42 KB</strong></span>
      <meter class="luz-bar-list__meter" min="0" max="42" value="42" aria-hidden="true">42 KB</meter>
    </li>
  </ul>
  <figcaption class="u-text-muted"><strong>84 KB</strong> in all.</figcaption>
</figure>
```

### Variantes y opciones
- `luz-bar-list--cells`: Celdas pequeñas en lugar de una barra continua, como en el segundo ejemplo: la que usa la página de inicio para los tamaños
- `luz-bar-list__row--zero`: Cifra en el color de marca, para una fila en 0
- `--luz-bar-list-color`: Otro color de gráfico para una lista o una fila, como `var(--luz-chart-2)`
- `--luz-bar-list-row-h`: Una misma altura de fila, para alinear listas una junto a otra

### Cómo funciona
Una lista en un `figure`: cada fila es un nombre, una cifra y un `meter` nativo, dibujado en `--luz-chart-1` con la pista en `--luz-chart-track`. Da el mismo `max` a todas las filas. Un nombre largo se corta en una línea. A diferencia de `.luz-meter`, el medidor no tiene ancho mínimo, así que nunca ensancha una tarjeta estrecha.

### Sin JavaScript
No lo necesita. Sin la hoja de estilos se lee como una lista de nombres y cifras.

### Teclado y ARIA
Nada recibe el foco. El nombre y la cifra son texto: oculta la barra con `aria-hidden="true"`. Un medidor que se deje visible necesita un nombre.

### Cuándo usarla
Úsala para comparar unos pocos valores en una misma escala: tamaños, recuentos, partes. Las celdas sirven para pocas comparaciones breves, como el tamaño de tres archivos o la parte de tres fuentes.

### Cuándo no usarla
No la uses para un solo valor (usa un [medidor](https://nandovejer.github.io/luz/es/docs/components/meter/)) ni para una tendencia en el tiempo. Conserva una [tabla](https://nandovejer.github.io/luz/es/docs/components/table/) cuando importen más los valores exactos.