1 Breadcrumbs
2 Error Summary
3 Footer
4 Header
5 Links-list
6 MenuNavigation
7 Menubar
8 Menu-horizontal
9 Menu-vertical
10 Nav
11 Notification
12 Skip-link
13 Accesibilidad

Componentes relativos a navegación

Vamos a ver como se usa cada uno de los componentes.

Breadcrumbs

<desy-breadcrumbs ...></desy-breadcrumbs>

Proporciona enlaces a cada página anterior por la que se navega y muestra la ubicación actual del usuario en un sitio web.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
items	BreadcrumbsData[]	Contiene la información relativa a la lista.	Si
id	string	Identificador del elemento <nav>
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <nav>
collapseOnMobile	boolean	Cuando es true se mostrarán unicamente el primer y último item, en resolución de tablet o menor
hasBackButton	boolean	Cuando es true el breadcrumbs comenzará con un botón de retroceso

Objeto BreadcrumbsData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del elemento de la lista.
routerLink	string	Ruta interna relativa al proyecto
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.

Propiedades de accesibilidad

El componente y cada DreadcrumbsData admiten los siguientes parámetros de accesibilidad.

Se permite proyectar contenido dentro de los elementos de breadcrumbs para facilitar su uso. Para ello se facilita el siguiente sub-componente:

BreadcrumbsItemComponent

<desy-breadcrumbs-item ...>...</desy-breadcrumbs-item>

Permite utilizar el contenido especificado como item de la lista de navegación a mostrar.

Admite las mismas propiedades de entrada que el objeto BreadcrumbsData.

implementación con 2 niveles

<desy-breadcrumbs [classes]="classes" id="implementacion2niveles"
    [items]="[{'text':'Section','routerLink':'/collapsible'},{'text':'Sub-section','routerLink':'/fieldset'}]">
</desy-breadcrumbs>

Implementación con 3 niveles y collapseOnMobile=true

Implementación con contenido

Error Summary

Permite representar un resumen de errores

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
errorList	ErrorSumaryData[]	Contiene la información relativa a la lista.	Si
id	string	Identificador del elemento <div>
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <div>
titleText	string	Contenido del título en formato texto plano. No se aplicará cuando se especifique la propiedad titleHtml.	Si, cuando no se especifica titleHtml.
titleHtml	string	Contenido del título en formato HTML.	Si, cuando no se especifica titleText.
descriptionText	string	Contenido de la descripción en formato texto plano. No se aplicará cuando se especifique la propiedad descriptionHtml.
descriptionHtml	string	Contenido de la descripción en formato HTML.

Objeto ErrorSummaryData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
fragment	string	Propiedad de routerLink para especificar el anchor. (ver https://angular.io/api/router/RouterLink ). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

Propiedades de accesibilidad

El componente y cada ErrorSummaryData admiten los siguientes parámetros de accesibilidad.

Se permite proyectar contenido dentro del ErrorSummary para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

TitleComponent

Permite especificar el título sin utilizar los parámetros de entrada.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

DescriptionComponent

Permite especificar la descripción sin utilizar los parámetros de entrada.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

ErrorSummaryItemComponent

Permite especificar un item de error.

Admite los mismos parámetros de entrada que el objeto ErrorSummaryData.

Footer

Permite representar un pie de página

Header

Permite representar una cabecera.

Links-list

Permite representar una lista de enlaces.

MenuNavigation

Permite representar un menú de navegación tanto con items simples como items con un listado de items desplegable.

Menubar

Permite representar un menú horizontal tanto con items simples como items con un listado de items desplegable.

Menu-horizontal

Permite representar un menú en dirección horizontal.

Menu-vertical

Permite representar un menú en dirección vertical.

Nav

Permite representar un menú de navegación

Notification

Permite representar un mensaje de notificación

Skip-link

Permite representar un enlace de saltar contenido.

Accesibilidad

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro	Atributo de accesibilidad equivalente

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
tabindex	tabindex

Área de empleados públicos e Integradores

desy-angular v9.0 - Manual de integración DesyNavModule