DESY

Sistema de Diseño del Gobierno de Aragón.

Item de estado

Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.

Índice de apartados de esta página

Anatomía

Anatomía de un item de estado
  1. Borde de error: Grosor de 4 px y color alert-base a la izquierda del contenedor cuando hay un estado de error. Lo acompaña un mensaje de error.
  2. Título: Encabeza el contenido que se muestra.
  3. Subtítulo opcional: A veces es necesario un texto secundario en color neutral-dark que describa brevemente el contenido. También puede incluirse un enlace a un modelo adjunto u otros contenidos relevantes.
  4. Items: Cada término se encuentra asociado a una definición. Por ejemplo, para visualizar bloques de datos aportados, como nombre o dirección. Dependiendo de su naturaleza puede sustituirse por una etiqueta de título, una pista de los datos a introducir o enlaces a documentos.
  5. Mensaje de error: Indica problema en la carga de datos o en la introducción de los mismos.
  6. Botones: Uno o varios botones que permiten la aportación, modificación o consulta de datos y documentos por parte del usuario.
  7. Estado: Subcomponente que muestra al usuario en qué situación se encuentra la aportación: incompleto, cargando, completado y error. Cada uno está acompañado de un icono como apoyo a la etiqueta de texto.

Estados

Completo

Incompleto

Subiendo (20%)

Error

Atención

El subcomponente estado distingue entre las variantes: éxito en la subida, aportaciones incompletas, porcentaje de carga, error en la carga y aviso de consideraciones a tener en cuenta.

Variantes

Por defecto

Completo

Alerta

Error:Descripción del error

Error

Por defecto

Apariencia del bloque para los estados de subiendo, éxito y atención.

Alerta

Apariencia del bloque para los estados de incompleto y error. Se marca con una línea de alerta roja en su borde izquierdo.

Accesibilidad

Cómo funciona

Contenedor con un id único y una lista <dl> de términos <dt> y definiciones <dd>.

Los iconos de estado tienen el parámetro aria-hidden=true por defecto, por lo que el texto que les acompaña debe describir claramente el estado.

Se puede utilizar el componente como un caller para anidar contenido como botones de acciones. Cada botón debe tener un <span> con .sr-only que extienda la descripción de la acción.

Qué tener en cuenta
Qué usar Dónde Función
id Parámetro Nunjucks dentro del componente Identifica el título del componente.