Catálogo · Gráficos
Anillo
Muestra un valor frente a una meta, o las partes de un total, como medio anillo sobre la cifra que lo dice.
Encaja mejor en: app — un panel que muestra el avance hacia una meta o cómo se reparte un total
Ejemplo
Un valor frente a una meta: las visitas de este mes frente a una meta de 2000. Las cifras son datos de ejemplo, para que pongas las tuyas.
1,260 of 2,000 visitors
Apilado
Dos series que suman un total, con una leyenda: las visitas de este mes por dispositivo. Sin --max, las series llenan el medio anillo.
1,830 visitors
- Desktop 1,260
- Mobile 570
Problemas conocidos
No se conocen problemas.
Código
Copiar el marcado
import "@luz-ds/catalog/components/ring.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/ring.min.css" integrity="sha384-YaRd4u10aQ2xYJEzSk0IBieFbMmJkBTRW8kCchIj7ejPMF7CLvBpdCPmju18ffH5" crossorigin="anonymous">Enlaza components/ring.css de @luz-ds/catalog después de luz.css. Un valor frente a una meta:
<figure class="luz-ring" style="--v1: 1260; --max: 2000">
<figcaption>Visitors this month</figcaption>
<p class="luz-ring__value">
<span class="luz-ring__figure">1,260</span>
<span class="luz-ring__label">of 2,000 visitors</span>
</p>
</figure>Series que suman un total, con una leyenda:
<figure class="luz-ring" style="--v1: 1260; --v2: 570">
<figcaption>Visitors by device, this month</figcaption>
<p class="luz-ring__value">
<span class="luz-ring__figure">1,830</span>
<span class="luz-ring__label">visitors</span>
</p>
<ul class="luz-ring__legend">
<li class="luz-ring__item"><span class="luz-ring__name">Desktop</span> <span class="luz-ring__figure">1,260</span></li>
<li class="luz-ring__item"><span class="luz-ring__name">Mobile</span> <span class="luz-ring__figure">570</span></li>
</ul>
</figure>Variantes y opciones
| Opción | Efecto |
|---|---|
--v1 | La primera serie, un número simple (1260, no 1.260). --v2 a --v4 añaden hasta tres más, en el orden de la leyenda |
--max | La meta. Sin ella, o cuando las series suman más, llenan el anillo |
--luz-ring-size | Lo más ancho que llega el medio anillo, 18rem por defecto; se reduce a su caja |
--luz-ring-color | El color de la primera serie, como var(--luz-chart-5); las demás conservan de --luz-chart-2 a --luz-chart-4 |
Cómo funciona
El texto son los datos: el título, la cifra y su etiqueta y, para las series, una leyenda. El anillo es un dibujo de ellos, hecho por los dos pseudoelementos del párrafo (la pista y las series, cada uno recortado en una banda por una máscara), de modo que la tecnología de apoyo nunca lo encuentra.
Cada serie toma su --v sobre --max, o sobre la suma de los valores si no hay --max, y de --luz-chart-1 a --luz-chart-4 en orden, los colores de las muestras de la leyenda. Corre desde la izquierda, en el sentido de las agujas del reloj, en todos los idiomas, como un reloj. El style en línea solo da números; con un style-src estricto, ponlos en una regla propia.
La figura es un contenedor de tamaño: por debajo de 14em el texto pasa debajo del arco, no dentro. En papel el anillo se omite y se imprime el texto.
Sin JavaScript
No lo necesita. Sin la hoja de estilos se lee como su título, la cifra con su etiqueta y la leyenda; no hay anillo.
Teclado y ARIA
Nada recibe el foco y no hay ARIA: un lector de pantalla lee el título, la cifra, su etiqueta y la leyenda, en ese orden. Escribe la meta en la etiqueta («de 2000 visitas»): el anillo solo no la dice.
En colores forzados la pista es el fondo, así que los huecos entre series también lo son; las series y las muestras toman los mismos colores del sistema, y cada muestra enseña el número de su serie.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Úsalo en un panel para cuánto falta a un valor para su meta (una cuota, un presupuesto, un límite de almacenamiento), o cómo se reparte un total en dos o tres partes, cuando la cifra es lo importante y el anillo una ojeada a ella.
Cuándo no usarlo
No lo uses para comparar valores (usa una lista de barras o un gráfico de columnas: una longitud se lee mejor que un ángulo), para más de cuatro series (usa una barra apilada) ni para un valor en un texto corrido o en un formulario (usa un medidor).
Qué hacer y qué no
Cómo escribir el contenido
Indica qué se cuenta y el periodo en el título («Visitas este mes»), escribe la cifra como se lee, con sus separadores, y di la meta o la unidad en la etiqueta. Mantén los nombres de la leyenda en una o dos palabras.
Contraste y foco
Cada serie es un color de gráfico sobre la superficie y sobre la pista; la pista es decorativa, porque la cifra dice el valor.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Requisitos |
|---|---|---|---|---|---|
Serie 1 sobre la página | --luz-chart-1 on --luz-surface-page | 5.6:1 | 7.7:1 | 14.1:1 | 3:1 |
Serie 2 sobre la página | --luz-chart-2 on --luz-surface-page | 5.3:1 | 8.9:1 | 9.3:1 | 3:1 |
Serie 1 sobre una tarjeta | --luz-chart-1 on --luz-surface | 5.9:1 | 7.2:1 | 14.1:1 | 3:1 |
Serie 2 sobre una tarjeta | --luz-chart-2 on --luz-surface | 5.6:1 | 8.2:1 | 9.3:1 | 3:1 |
Serie 1 sobre la pista | --luz-chart-1 on --luz-chart-track | 3.4:1 | 3.8:1 | 6.8:1 | 3:1 |
Serie 2 sobre la pista | --luz-chart-2 on --luz-chart-track | 3.2:1 | 4.4:1 | 4.4:1 | 3:1 |
Serie 3 sobre la página | --luz-chart-3 on --luz-surface-page | 9.6:1 | 10.6:1 | 10.9:1 | 3:1 |
Serie 3 sobre la pista | --luz-chart-3 on --luz-chart-track | 5.9:1 | 5.3:1 | 5.2:1 | 3:1 |
Serie 4 sobre la página | --luz-chart-4 on --luz-surface-page | 9.8:1 | 6.1:1 | 6.6:1 | 3:1 |
Serie 4 sobre la pista | --luz-chart-4 on --luz-chart-track | 6.0:1 | 3.0:1 | 3.2:1 | 3:1 |
Cifra | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Etiqueta y nombre | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3: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 valor está en texto, un hueco de la pista separa dos series y la leyenda sigue el orden del anillo.
Tokens que usa
Los 18 tokens que lee components/ring.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.
- Color
--luz-chart-1,--luz-chart-2,--luz-chart-3,--luz-chart-4,--luz-chart-track,--luz-text-secondary- Spacing and sizing
--luz-space-2xs,--luz-space-4xl,--luz-space-md,--luz-space-sm,--luz-space-xs- Typography
--luz-font-heading,--luz-font-mono,--luz-font-sans,--luz-text-2xl,--luz-text-sm,--luz-text-xs- Radius
--luz-radius-sm
El teclado y ARIA están en la pestaña Código.