Panel de control

Código

Copiar el marcado

import "@luz-ds/catalog/components/dashboard.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/dashboard.min.css" integrity="sha384-G+VBlP1ufPGoYlRgylA/N+xI4iqLCarfUXTGrPbwteTmtaqhi7iVz7gXNXkK/gVy" crossorigin="anonymous">

La vista: una fila de título y, después, los paneles. La fila de título es un <div> y cada panel empieza con su encabezado.

<main class="luz-dashboard" id="main-content" tabindex="-1">
  <div class="luz-dashboard__head">
    <h1 class="luz-dashboard__title">Overview</h1>
    <div class="o-actions">
      <a class="luz-btn luz-btn--primary" href="/reports/new/">New report</a>
      <a class="luz-btn luz-btn--secondary" href="/export/">Export data</a>
    </div>
  </div>
  <ul class="o-grid o-grid--auto">
    <li class="luz-card luz-dashboard__panel luz-dashboard__panel--wide">
      <h2 class="luz-card__title">Sales this month</h2>
      <p class="luz-card__body">…</p>
    </li>
    <li class="luz-card luz-dashboard__panel">
      <h2 class="luz-card__title">Stock alerts</h2>
      <p class="luz-card__body">…</p>
    </li>
  </ul>
</main>

Un panel que muestra datos contiene una de las piezas de datos (una lista de barras, un gráfico de columnas, una barra apilada o un mapa de calor) o el gráfico, cada una sobre una lista o una tabla nativa que se queda en la página. Las cifras de aquí son de ejemplo: los números, los títulos y los paneles son tuyos.

<!-- Sample figures: write your own -->
<ul class="o-grid o-grid--auto">
  <li class="luz-card luz-dashboard__panel">
    <h2 class="luz-card__title">Orders this month</h2>
    <div class="luz-stat">
      <p class="luz-stat__value">1,204</p>
      <p class="luz-stat__label">12 % more than last month</p>
    </div>
  </li>
  <li class="luz-card luz-dashboard__panel">
    <h2 class="luz-card__title" id="by-channel">Orders by channel</h2>
    <figure class="luz-bar-list" aria-labelledby="by-channel">
      <ul class="luz-bar-list__rows">
        <li class="luz-bar-list__row">
          <span class="luz-bar-list__name">Online</span>
          <span class="luz-bar-list__figure">640</span>
          <meter class="luz-bar-list__meter" min="0" max="1204" value="640" aria-hidden="true">640 of 1,204</meter>
        </li>
      </ul>
    </figure>
  </li>
  <li class="luz-card luz-dashboard__panel luz-dashboard__panel--wide">
    <h2 class="luz-card__title">Orders over time</h2>
    <luz-chart type="line" data-luz-label-table="Show table" data-luz-label-chart="Show chart">
      <table class="luz-table">
        <caption>Orders per month, January to June</caption>
        <thead><tr><th scope="col">Month</th><th scope="col">Orders</th></tr></thead>
        <tbody>
          <tr><th scope="row">Jan</th><td data-label="Orders"><data value="820">820</data></td></tr>
          <!-- one tr for each month -->
        </tbody>
      </table>
    </luz-chart>
  </li>
  <li class="luz-card luz-dashboard__panel">
    <h2 class="luz-card__title" id="by-status">Orders by status</h2>
    <figure class="luz-stacked-bar" aria-labelledby="by-status">
      <div class="luz-stacked-bar__bar" aria-hidden="true">
        <span class="luz-stacked-bar__part" style="--v: 62"></span>
        <span class="luz-stacked-bar__part" style="--v: 38"></span>
      </div>
      <ul class="luz-stacked-bar__legend">
        <li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Delivered</span> <span class="luz-stacked-bar__figure">62 %</span></li>
        <li class="luz-stacked-bar__item"><span class="luz-stacked-bar__name">Other</span> <span class="luz-stacked-bar__figure">38 %</span></li>
      </ul>
    </figure>
  </li>
</ul>

Variantes y opciones

Un modificador para el panel. El panel de control es una clase de app aplicada a un <main> nativo; la cuadrícula y la tarjeta son de core.

Cómo funciona

CSS de components/dashboard.css de @luz-ds/catalog aplicado a la cuadrícula y la tarjeta de core. Sin JavaScript.

• El panel de control asigna --luz-grid-min: 18rem a .o-grid--auto de core, así que las columnas nunca miden menos de 18 rem y su número depende del espacio: una a 320 px, dos a 768 px y tres a 1280 px junto a una barra lateral.
• El panel de control es un contenedor de tamaño. El panel ancho consulta el ancho del panel de control, no el de la ventana, así que cabe tanto con barra lateral como sin ella. A partir de 40 rem siempre caben dos columnas (dos de 18 rem y un espacio); al ampliar el texto al 200 %, ambas siguen medidas en rem y no se desbordan.
• Los paneles conservan el orden del marcado. No hay empaquetado denso ni se usa order: si un panel ancho no cabe en el espacio restante de una fila, empieza en la siguiente y se mantiene la separación. El orden de lectura, el del foco y el visual coinciden.
• Un panel puede encogerse, así que una línea larga de código o una tabla se desplaza dentro de su propio contenedor y no ensancha la columna.
• Un panel con datos usa las piezas que ya existen: la cifra destacada para una cifra, la lista de barras, el gráfico de columnas, la barra apilada y el mapa de calor, y el gráfico para una tendencia. Cada una dibuja una lista o una tabla que tú escribiste, y esa lista o tabla se queda en la página. La lista de barras, el gráfico de columnas, la barra apilada y el mapa de calor son hojas de estilo aparte: enlaza después de luz.css cada una que uses.
• Los datos son tuyos. LUZ no los obtiene, no los cuenta ni los inventa, y los títulos y números del ejemplo son de muestra, para sustituir.
• Los paneles vacíos, en carga o con errores forman parte del contenido del panel: una frase y un enlace, el indicador de progreso o la alerta de core. En 0.1 no hay una clase para esqueletos de carga.

Sin JavaScript

No cambia nada: la cuadrícula, la consulta del contenedor y las tarjetas usan CSS.

Teclado y ARIA

• Orden: el del código fuente: primero las acciones de la fila del título y, después, cada panel. Si un panel es una tarjeta con un enlace, se llega a él mediante ese enlace.
• Encabezados: la vista tiene un <h1> en la fila del título y cada panel empieza con un <h2>. La fila del título es un <div>, no un <header>.
• Lista: los paneles son un <ul> de elementos <li>; el lector de pantalla indica cuántos hay. Safari puede quitar el rol de lista si no hay marcadores; los encabezados permiten recorrer los paneles.
• Acciones: una acción que lleva a otro sitio es un enlace (<a href>); una que hace algo en esta página es un <button type="button">. Nunca uses <a> sin href.
• Datos: las cifras de un panel son primero texto (un nombre y un número, o una tabla), así que cada panel se lee sin la imagen. El botón del gráfico cambia el dibujo por su tabla, y un cambio nunca se dice solo con el color: una comparación dice «12 % más que el mes pasado» con palabras.
• Puntos de referencia: el panel de control es el <main> de la página, hermano de la cabecera. Es el destino del enlace para saltar al contenido y lleva tabindex="-1".

La pestaña Diseño contiene el contraste y el foco.

Diseño

Cuándo usarlo

Usa el panel de control para una vista que muestre varios aspectos del mismo tema, cada uno lo bastante breve para leerse de un vistazo y con un enlace a su propia página.

• Un resumen, una página de estado o una vista de inicio desde la que consultar y actuar sobre un elemento.
• El panel más importante va primero y es ancho: ocupa el espacio cuando la vista lo tiene.

Cuándo no usarlo

No lo uses para una vista que sea una única pieza larga: una tabla, un formulario o un documento no son paneles.

• Una acción principal por vista, en la fila del título, nunca en un panel.
• No hagas que un panel sea más alto que los contiguos mediante celdas que ocupen varias filas o empaquetado denso: eso lo desplaza por delante de otros que aparecen antes en el marcado.
• Para una cuadrícula sencilla de tarjetas en una página de contenido, usa la cuadrícula y la tarjeta de core.

Qué hacer y qué no

Cómo escribir el contenido

El título nombra la vista; cada panel identifica un tema y explica su estado en una frase.

• Título: un nombre conocido por la barra lateral, como «Resumen» o «Informes». Debe coincidir con el texto del enlace de la barra.
• Acción principal: un verbo y lo que se crea, como «Crear informe». Una por vista.
• Título del panel: el tema, como «Avisos de existencias». Debajo, una frase con la cantidad: «Tres productos están por debajo del mínimo».
• Enlace: indica adónde lleva, como «Revisar existencias», no «Más» ni «Haz clic aquí».
• Cifras: solo reales. Una muestra se marca como muestra en la página que la enseña, y un número inventado nunca se publica como un panel de control terminado.

Contraste y foco

El título aparece sobre la superficie de la página y el texto de los paneles sobre la superficie de las tarjetas.

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido corresponde a WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: cada enlace y botón del panel conserva el anillo de core, de 2 px y color --luz-focus-ring. Si el título del panel es un enlace, el anillo rodea toda la tarjeta.
• Bordes: el borde de la tarjeta (--luz-divider) es decorativo; el texto transmite el significado. El borde se conserva con colores forzados.

Tokens que usa

Los 7 tokens que usan las reglas de .luz-dashboard de components/dashboard.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde figuran los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-text-primary

Spacing and sizing

--luz-space-lg, --luz-space-md, --luz-space-sm, --luz-space-xl

Typography

--luz-text-2xl, --luz-text-xl

La pestaña Código contiene el teclado y ARIA.