Catálogo · Gráficos
Lista de barras
Compara unos pocos valores con una lista de nombres, cifras y barras, mediante el elemento meter nativo.
Encaja mejor en: app — un informe o un resumen que compara unos pocos tamaños, recuentos o proporciones
Ejemplo
Paquetes por ruta esta semana.
En celdas
La misma lista con el medidor cortado en celdas pequeñas, una cifra en negrita y un pie que lleva un total en negrita y una nota: el patrón de la tarjeta Light de la página de inicio, que compara el tamaño de tres paquetes. Los nombres, los tamaños y la nota de aquí son inventados; las cifras, las palabras y la unidad las escribes tú.
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/bar-list.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/bar-list.min.css" integrity="sha384-Xl3NzktxixQWSXVFEmjRxNMgf0ez9vdz5p03hix/CwaM9sMmZZWIxrG1tYeDXVuy" crossorigin="anonymous">Una hoja de estilos de @luz-ds/catalog: enlaza components/bar-list.css después de luz.css.
<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:
<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
| Opción | Efecto |
|---|---|
luz-bar-list | 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 | 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.
El contraste y el foco están en la pestaña Diseño.
Diseño
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) ni para una tendencia en el tiempo. Conserva una tabla cuando importen más los valores exactos.
Qué hacer y qué no
max y su cifra en texto: la longitud permite comparar y el número indica cuánto hay.Cómo escribir el contenido
Indica la unidad y el periodo en el pie («Paquetes por ruta, esta semana»), mantén cada nombre corto y escribe la cifra con su unidad.
Contraste y foco
El relleno es un color de gráfico; la pista es más discreta a propósito, porque la cifra lleva el valor.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Barra sobre su pista | --luz-chart-1 on --luz-chart-track | 3.4:1 | 3.8:1 | 6.8:1 | 2:1 |
Barra sobre la página | --luz-chart-1 on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 3:1 |
Barra sobre una tarjeta | --luz-chart-1 on --luz-surface | 5.9:1 | 7.2:1 | 14.1:1 | 3:1 |
Nombre | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Cifra de una fila en 0 | --luz-brand-primary on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 4.5:1 |
Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.
- Foco: nada lo recibe.
- No solo color: cada barra tiene su cifra en texto.
Tokens que usa
Los 12 tokens que lee components/bar-list.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Typography
--luz-font-mono,--luz-font-sans,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-sm- Spacing and sizing
--luz-space-3xs,--luz-space-sm,--luz-space-xs
El teclado y ARIA están en la pestaña Código.