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

Owned by Servicios Digitales de Aragón
17 Apr 2023
36 min read

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.

 

 

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

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