/
desy-angular v6.0 - Manual de integración DesyNavModule

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

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

 

Implementación con contenido
<desy-breadcrumbs [classes]="classes" [id]="implementacionContendio" [collapseOnMobile]="true" [hasBackButton]="true"> <desy-breadcrumbs-item [routerLink]="'/'">Home</desy-breadcrumbs-item> <desy-breadcrumbs-item>Section</desy-breadcrumbs-item> <desy-breadcrumbs-item [routerLink]="'/section/sub-section'">Sub-section</desy-breadcrumbs-item> <desy-breadcrumbs-item [routerLink]="'/collapsible'">Sub Sub-section</desy-breadcrumbs-item> </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.

 

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

TitleComponent

<desy-title>...</desy-title>

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

<desy-description>...</desy-description>

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

<desy-error-summary-item ...>...</desy-error-summary-item>

Permite especificar un item de error.

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

Con contenido

<desy-error-summary [classes]="'p-base border-2 border-alert-base'" [id]="'error-summary-title'"> <desy-title>There is a problem</desy-title> <desy-description>Some fields are incomplete</desy-description> <desy-error-summary-item [fragment]="'anchor'">Invalid username or password</desy-error-summary-item> <desy-error-summary-item>Agree to the terms of service to log in</desy-error-summary-item> </desy-error-summary>

 

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

Obligatorio

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>

 

noLogo

boolean

Controla si el pie de página muestra o no la imagen de la bandera Europea

 

description

DescriptionData

Objeto que contiene opciones para añadir una descripción, que sustituirá el texto predeterminado del pie de página

 

 

Objeto MetaData

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

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. No se aplicará cuando se especifique la propiedad routerLink.

 

routerLink

string

Ruta interna relativa al proyecto (ver Angular ).

 

fragment

string

Propiedad de routerlink para especificar el anchor. Por defecto content.

(ver Angular ).

Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

 

Objeto NavigationData

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

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. No se aplicará cuando se especifique la propiedad routerLink.

 

routerLink

string

Ruta interna relativa al proyecto (ver Angular ).

 

fragment

string

Propiedad de routerlink para especificar el anchor. Por defecto content.

(ver Angular ).

Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

 

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.

 

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

FooterNavigationComponent

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

Permite especificar un elemento navigation. Admite las mismas propiedades de entrada que el objeto NavigationData, a excepción de items.

A su vez, admite como contenido un listado de componentes FooterNavigationItemComponent, que representan los items del navigation y admiten los mismos parámetros de entrada que el objeto NavigationItemData.

<desy-footer-navigation-item>...</desy-footer-navigation-item>

FooterMetaComponent

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

Permite especificar el elemento meta. Admite él parámetro de entrada visuallyHiddenTitle, especificado en el objeto MetaData.

A su vez, admite como contenido:

  • El componente ContentComponent, para especificar contenido genérico.

  • Un listado de componentes FooterMetaItemComponent, que representan los items del meta y admiten los mismos parámetros de entrada que el objeto MetaItemData. <desy-footer-meta-item>...</desy-footer-meta-item>

IconComponent

<desy-icon>...</desy-icon>

Permite especificar el icono.

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

IconComponent

<desy-description>...</desy-description>

Permite especificar el elemento description.

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