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
• Variantes
• Accesibilidad

Anatomía #

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 #

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.