1 Breadcrumbs
2 Error Summary
3 Footer
4 Header
5 Menu-horizontal
6 Menu-vertical
7 Nav
8 Notification
9 Skip-link
10 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.

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

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

Error Summary

<desy-error-summary ...></desy-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.

Sin Links

<desy-error-summary classes="p-base border-2 border-alert-base" titleText="There is a problem" id="error-summary-title" 
    [errorList]="[{'text':'Invalid username or password'}]">
</desy-error-summary>

Con y sin Links

<desy-error-summary classes="p-base border-2 border-alert-base" titleText="There is a problem" id="error-summary-title" 
    [errorList]="[{'text':'Invalid username or password'},{'text':'Agree to the terms of service to log in','fragment':'example-error-1'}]">
</desy-error-summary>

Footer

<desy-footer ...></desy-footer>

Permite representar un pie de página

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción
meta	MetaData	Objeto que contiene opciones para la navegación.
navigation	NavigationData	Listado de elementos para usar en la sección de navegación del pie de página.
icon	IconData	Icono adicional al logo de FEDER
containerClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <div>
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <footer>

Objeto MetaData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción
visuallyHiddenTitle	string	Título de una sección de meta oculto, por defecto 'Enlaces de pie de página'
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.
html	string	Contenido del texto en formato HTML.
items	MetaItemData[]	Listado de elementos para usar en la sección meta del pie de página.

Objeto MetaItemData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano.
href	string	Ruta externa a la que se redirigirá al pulsar el item.

Objeto NavigationData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción
title	string	Título de una sección
columns	integer	Cantidad de columnas para mostrar elementos en la sección de navegación del pie de página.
items	NavigationItemData[]	Listado de elementos para mostrar en la lista en la sección de navegación del pie de página.

Objeto NavigationItemData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.
href	string	Ruta externa a la que se redirigirá al pulsar el item.

Objeto IconData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
html	string	Contenido del texto en formato HTML.

Propiedades de accesibilidad

El componente, MetaItemData y NavigationItemData admiten los siguientes parámetros de accesibilidad.

Básico

<desy-footer></desy-footer>

Con meta e items

<desy-footer [meta]="{'items': [{'href': '#1','text': 'Item 1'},{'href': '#2','text': 'Item 2'},{'href': '#3','text': 'Item 3'}]}"></desy-footer>

Header

<desy-header ...></desy-header>

Permite representar una cabecera.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción
homepageUrl	String	Ruta externa a la que se redirigirá al pulsar el icono del logo. No se aplicará cuando se especifique la propiedad routerLink.
homepageRouterLink	String	Ruta interna relativa al proyecto a la que se redirigirá al pulsar el icono del logo(ver https://angular.io/api/router/RouterLink).
homepageFragment	String	Propiedad de routerlink para especificar el anchor. Por defecto content. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.
expandedLogo	boolean	Permite mostrar el icono expandido, el cual contiene el texto “GOBIERNO DE ARAGON”. A pesar de esta opción, este texto permanecerá oculto en pantallas pequeñas. Utilizar este logotipo en apps que estén dirigidas al ciudadano.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <header>.
subnavData	HeaderSubnavData	Datos del dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente.
navigationData	HeaderNavigationData	Datos del menu principal de navegación
dropdownData	HeaderDropdownData	Datos del dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.
offcanvasData	HeaderOffcanvasData	Opciones del menú lateral que sólo se muestra en anchuras pequeñas

Objeto HeaderSubnavData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

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.

items

NavItemData

Items del dropdown. Si no se proporcionan, el texto será simple sin un dropdown.

Ver componente Nav.

Objeto HeaderNavigationData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <nav>.
items	HeaderNavigationItemData	Items del nav.

Objeto HeaderNavigationItemData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
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.
active	boolean	Indica si el item está actualmente seleccionado.
disabled	boolean	Indica si el item está deshabilitado.
href	string	Ruta externa a la que se redirigirá al pulsar el item. No se aplicará cuando se especifique la propiedad routerLink.
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
fragment	string	Propiedad de routerlink para especificar el anchor. Por defecto content. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

Objeto HeaderDropdownData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
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.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento que contiene el Dropdown.
items	NavItemData	Items del dropdown. Ver componente Nav.

Objeto HeaderOffcanvasData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano del botón para mostrar el menú. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML del botón para mostrar el menú.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento que contiene el Dropdown.
textClose	string	Texto que se mostrará en el botón de cerrar	Sí
labelledId	string	Identificador de la etiqueta del título del contenido a mostrar en el menú lateral. Se utilizará como atributo aria-labelledby del dialog.	Sí
contentHtml	TemplateRef<any>	Referencia a una template con el contenido a mostrar en el menú lateral.	Sí

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Header en pantalla grande

Header en pantalla mobile

Menu lateral desplegado en pantalla mobile

implementación

<desy-header homepageRouterLink="/" [expandedLogo]="true" [subnavData]="{ text: 'Desy-angular' }"
  [navigationData]="{ items: [ { text: 'Item Nav 1' }, { text: 'Item Nav 2', routerLink: '../'   } ] }"
  [dropdownData]="{
    text: 'Dropdown',
    items: [
      {
        text: 'Item Dropdown 1',
        href: 'http://google.es'
      },
      {
        text: 'Item Dropdown 2',
        routerLink: '../'
      }
    ]}"
  [offcanvasData]="{ text: 'Menu', textClose: 'Cerrar', contentHtml: headerOffCanvasMenu, labelledId: 'header-offcanvas-menu-title' }">
  <ng-template #headerOffCanvasMenu>
    <ul>
      <li>
        <h3 class="p-base text-base font-bold" id="header-offcanvas-menu-title">Componentes</h3>
        <desy-nav classes="bg-warning-light" [items]="[{ text: 'Ejemplo 1', routerLink: '../'}, { text: 'Ejemplo 2', routerLink: []}]"></desy-nav>
      </li>
      <li>
        <h3 class="p-base pt-xl text-base font-bold">Información adicional</h3>
        <desy-nav classes="bg-warning-light" [items]="[{ text: 'Desy-frontend', href: 'http://desy.jesuscuadra.es/', target: '_blank' }]"></desy-nav>
      </li>
    </ul>
  </ng-template>
</desy-header>

Menu-horizontal

<desy-menu-horizontal ...></desy-menu-horizontal>

Permite representar un menú en dirección horizontal.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del menú.
idPrefix	string	Prefijo para el id de los items. Por defecto ‘menu-item’.
items	MenuHorizontalItemData[]	Elementos del menú.	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

MenuHorizontalItemData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del item.

Área de empleados públicos e Integradores

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

Componentes relativos a navegación

Breadcrumbs

implementación con 2 niveles

Implementación con 3 niveles y collapseOnMobile=true

Error Summary

Sin Links

Con y sin Links

Footer

Básico

Con meta e items

Header

implementación

Menu-horizontal

MenuHorizontalItemData