DESY

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

Item

Bloque que presenta una información o acciones determinadas y que pueden apilarse varios de ellos.

Índice de apartados de esta página

Anatomía

Anatomía del item
  1. Contenedor: Agrupa los datos asociados con el item y sus acciones.
  2. Icono accionable/de estado: Otorga información cuando el item puede ser arrastrado o está bloqueado. Normalmente lo utilizamos cuando editamos la ordenación de una lista de items.
  3. Título: Denominación del item.
  4. Descripción: Breve explicación del contenido.
  5. Metadatos: Distintas etiquetas que proporcionan información relevante. Por ejemplo: campos, dependencia, modelo...
  6. Botones: Dependiendo de la naturaleza del componente, éste puede incluir uno o dos botones transparentes para realizar determinadas acciones.
  7. Icono como apoyo: Otorga información de la tipología del item. Por ejemplo: documento, normativa, enlace...
  8. Enlace: Etiqueta que permite la visualización o descarga del documento o sitio web asociado al item. Por ejemplo: una normativa, un modelo de formulario...

Variantes

En una lista de items apilados, es posible dar la opción de interactuar con ellos y modificar su ordenación.

Item por defecto

Item arrastrable

Item bloqueado

Item por defecto

Es el componente base, no permite interacción.

Item arrastrable

El área de interacción se encuentra reprentada en la zona izquierda del contenedor a través de un icono compueto por seis puntos. Haciendo clic y arrastrando es posible cambiar su posición con respeco al resto de items.

Item bloqueado

Se indica con un icono de candado en la zona izquierda del contenedor. Su posición se encuentra fijada y no es posible interactuar con él.

Accesibilidad

Cómo funciona

Contenedor con distintos elementos configurables: encabezados, items descriptivos que se construyen dentro de una lista <ul> e iconos con su propio aria-label por defecto.

Se puede utilizar el componente como un caller para anidar contenido como botones de acciones. Cada botón debe tener un aria-labelledby que apunte al id de si mismo y al id del título.

Qué tener en cuenta
Qué usar Dónde Función
id Dentro del parámetro Nunjucks attributes en el title Identifica el título del componente.