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

desy-angular v5.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>

 

 

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 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 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 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 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.

Completo con contenido
<desy-footer> <desy-footer-navigation [title]="'nav 1'"> <desy-footer-navigation-item [routerLink]="'urlInterna'">Item nav 1</desy-footer-navigation-item> <desy-footer-navigation-item [href]="'urlExterna'">Item nav 2</desy-footer-navigation-item> </desy-footer-navigation> <desy-footer-navigation [title]="'nav 2'" [columns]="2"> <desy-footer-navigation-item [routerLink]="'urlInterna'">Item nav 1</desy-footer-navigation-item> <desy-footer-navigation-item [href]="'urlExterna'">Item nav 2</desy-footer-navigation-item> <desy-footer-navigation-item [routerLink]="'urlInterna2'">Item nav 3</desy-footer-navigation-item> <desy-footer-navigation-item [href]="'urlExterna2'">Item nav 4</desy-footer-navigation-item> </desy-footer-navigation> <desy-footer-meta [visuallyHiddenTitle]="'hidden title'"> <desy-content>Contenido en meta</desy-content> <desy-footer-meta-item [routerLink]="'urlInterna'">Item meta 1</desy-footer-meta-item> <desy-footer-meta-item [href]="'urlExterna'">Item meta 2</desy-footer-meta-item> </desy-footer-meta> <desy-icon> <a href="https://sda.aragon.es/" class="text-sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.009 93.066" width="12rem" class="w-auto h-9 mb-sm ml-sm fill-current" role="img" aria-label="Servicios Digitales de Aragón (SDA)"><g fill="#545454"><g><path d="M38.281 35.133a6.036 6.036 0 01-.967 3.383 6.325 6.325 0 01-2.788 2.3 10.33 10.33 0 01-4.274.82 17.4 17.4 0 01-3.433-.287 12.847 12.847 0 01-2.887-1v-4.934a16.416 16.416 0 003.293 1.268 12.218 12.218 0 003.139.457 3.057 3.057 0 001.808-.428 1.316 1.316 0 00.574-1.1 1.213 1.213 0 00-.231-.737 2.7 2.7 0 00-.743-.637q-.512-.323-2.725-1.318a13.068 13.068 0 01-3.006-1.764 5.435 5.435 0 01-1.485-1.962 6.526 6.526 0 01-.484-2.621 5.253 5.253 0 012.06-4.414 9.085 9.085 0 015.661-1.584 15.886 15.886 0 016.488 1.472l-1.695 4.274a12.289 12.289 0 00-4.961-1.317 2.587 2.587 0 00-1.569.377 1.149 1.149 0 00-.491.94 1.357 1.357 0 00.624 1.079 23.816 23.816 0 003.384 1.737 9.338 9.338 0 013.678 2.558 5.551 5.551 0 011.03 3.44"/><path d="M66.26 72.245l-1.008-3.838h-6.657l-1.036 3.838h-6.081l6.683-20.57h7.385l6.768 20.57zm-2.157-8.379l-.884-3.363q-.308-1.119-.749-2.9c-.295-1.185-.488-2.037-.582-2.55q-.126.714-.5 2.355t-1.647 6.459z"/><path d="M71.109 30.562q0 5.129-2.824 7.9t-7.939 2.775h-6.628V20.752h7.091q4.932 0 7.616 2.524t2.684 7.286m-5.746.2a6.516 6.516 0 00-1.114-4.177 4.121 4.121 0 00-3.384-1.358h-1.611v11.477h1.233a4.467 4.467 0 003.7-1.464 7.08 7.08 0 001.177-4.478"/><path d="M21.379 52.233h19.456v19.455H21.379z"/><path d="M122.776 34.913a6.041 6.041 0 01-.968 3.384 6.319 6.319 0 01-2.788 2.3 10.327 10.327 0 01-4.274.819 17.238 17.238 0 01-3.433-.288 12.745 12.745 0 01-2.887-1v-4.932a16.435 16.435 0 003.293 1.267 12.221 12.221 0 003.14.456 3.056 3.056 0 001.807-.427 1.314 1.314 0 00.574-1.1 1.21 1.21 0 00-.231-.736 2.683 2.683 0 00-.743-.639q-.512-.322-2.725-1.316a13.135 13.135 0 01-3.006-1.766 5.43 5.43 0 01-1.485-1.961 6.529 6.529 0 01-.483-2.621 5.25 5.25 0 012.059-4.414 9.072 9.072 0 015.661-1.584 15.892 15.892 0 016.489 1.471l-1.7 4.275a12.276 12.276 0 00-4.961-1.318 2.6 2.6 0 00-1.569.378 1.145 1.145 0 00-.491.94 1.357 1.357 0 00.624 1.078 23.682 23.682 0 003.385 1.737 9.363 9.363 0 013.677 2.558 5.556 5.556 0 011.031 3.44"/><path d="M133.285 41.415a8.525 8.525 0 01-6.158-2.108 7.944 7.944 0 01-2.193-6.006 8.653 8.653 0 012.031-6.172 7.6 7.6 0 015.8-2.15 7.7 7.7 0 015.542 1.871 7.107 7.107 0 011.955 5.387v2.438h-9.793a2.722 2.722 0 00.973 2.089 3.82 3.82 0 002.5.756 12.084 12.084 0 002.655-.274 13.161 13.161 0 002.628-.931v3.937a9.637 9.637 0 01-2.663.911 18.435 18.435 0 01-3.279.252m-.322-12.71a2.286 2.286 0 00-1.619.61 2.861 2.861 0 00-.763 1.912h4.708a2.72 2.72 0 00-.652-1.834 2.145 2.145 0 00-1.674-.688"/><path d="M152.945 24.979a8 8 0 011.359.111l.308.057-.49 5.17a8.068 8.068 0 00-1.864-.168 3.55 3.55 0 00-2.605.819 3.216 3.216 0 00-.813 2.362v7.8h-5.479V25.258h4.077l.855 2.536h.266a5.49 5.49 0 011.912-2.038 4.575 4.575 0 012.474-.777"/><path d="M160.988 41.133l-6.053-15.876h5.717l2.69 9.388c.01.047.028.127.057.238s.055.246.084.4.053.318.077.492a3.672 3.672 0 01.034.483h.1a5.63 5.63 0 01.252-1.584l2.816-9.416h5.7l-6.053 15.875z"/><path d="M174.245 21.307a2.318 2.318 0 01.686-1.836 4.342 4.342 0 014.442.014 2.3 2.3 0 01.7 1.822q0 2.41-2.929 2.41-2.9 0-2.9-2.41m5.619 19.828h-5.479V25.259h5.479z"/><path d="M190.919 41.415a7.8 7.8 0 01-5.906-2.1 8.4 8.4 0 01-2.01-6.039 7.561 7.561 0 018.352-8.3 11.563 11.563 0 015.2 1.205l-1.612 4.049a17.954 17.954 0 00-1.835-.694 5.921 5.921 0 00-1.752-.258 2.368 2.368 0 00-2.061 1.036 5.051 5.051 0 00-.728 2.929q0 3.812 2.816 3.811a8.523 8.523 0 004.624-1.4v4.358a8.992 8.992 0 01-5.087 1.4"/><path d="M199.048 21.307a2.315 2.315 0 01.686-1.836 4.344 4.344 0 014.443.014 2.3 2.3 0 01.7 1.822q0 2.41-2.93 2.41-2.9 0-2.9-2.41m5.619 19.828h-5.479V25.259h5.479z"/><path d="M223.653 33.162a8.4 8.4 0 01-2.094 6.074 7.752 7.752 0 01-5.865 2.178 7.6 7.6 0 01-5.752-2.227 9.651 9.651 0 01-.042-12.058 7.829 7.829 0 015.878-2.151 8.38 8.38 0 014.134.995 6.8 6.8 0 012.769 2.852 9.232 9.232 0 01.972 4.337m-10.285 0a7.072 7.072 0 00.546 3.118 1.9 1.9 0 001.836 1.071 1.849 1.849 0 001.8-1.071 7.309 7.309 0 00.524-3.118 6.946 6.946 0 00-.531-3.069 2.111 2.111 0 00-3.631-.007 6.782 6.782 0 00-.546 3.076"/><path d="M239.039 36.258a4.521 4.521 0 01-1.736 3.855 8.21 8.21 0 01-4.989 1.3 21.552 21.552 0 01-3.07-.19 12.988 12.988 0 01-2.662-.693v-4.385a16.511 16.511 0 002.795.924 11.742 11.742 0 002.712.365q1.781 0 1.779-.814a.917.917 0 00-.5-.749 22.833 22.833 0 00-2.893-1.281 7.217 7.217 0 01-3.055-2.041 4.648 4.648 0 01-.868-2.892 4.007 4.007 0 011.71-3.448 8.16 8.16 0 014.834-1.232 12.135 12.135 0 012.949.343 17.513 17.513 0 012.865 1l-1.484 3.531a16.555 16.555 0 00-2.314-.834 7.619 7.619 0 00-1.989-.343c-.9 0-1.346.22-1.346.658a.823.823 0 00.47.694 25.48 25.48 0 002.712 1.17 10.43 10.43 0 012.487 1.345 4.028 4.028 0 011.205 1.549 5.433 5.433 0 01.385 2.164"/><path d="M267.247 30.457q0 5.13-2.823 7.9t-7.938 2.774h-6.628V20.649h7.089q4.934 0 7.618 2.521t2.682 7.287m-5.745.2a6.519 6.519 0 00-1.113-4.177 4.124 4.124 0 00-3.385-1.359h-1.61v11.476h1.231a4.461 4.461 0 003.7-1.463 7.07 7.07 0 001.178-4.477"/><path d="M270.485 21.307a2.315 2.315 0 01.687-1.836 4.339 4.339 0 014.44.014 2.293 2.293 0 01.7 1.822q0 2.41-2.928 2.41-2.9 0-2.9-2.41m5.619 19.828h-5.479V25.259h5.479z"/><path d="M294.909 25.258v2.648l-2.172.8a3.857 3.857 0 01.45 1.893 4.776 4.776 0 01-1.8 3.979 8.593 8.593 0 01-5.378 1.414 6.906 6.906 0 01-1.4-.112 1.466 1.466 0 00-.2.687q0 .405.658.623a5.643 5.643 0 001.724.216h2.636q5.336 0 5.339 4.5a5.1 5.1 0 01-2.475 4.512 12.653 12.653 0 01-6.942 1.613 9.965 9.965 0 01-5.207-1.129 3.6 3.6 0 01-1.828-3.245q0-2.842 3.532-3.669a3.2 3.2 0 01-1.27-1 2.131 2.131 0 01-.133-2.67 6.032 6.032 0 011.7-1.352 4.231 4.231 0 01-1.942-1.71 5.352 5.352 0 01-.708-2.83 4.885 4.885 0 011.767-4.023 7.844 7.844 0 015.045-1.427q.434 0 1.5.1c.71.067 1.232.126 1.568.182zM282.943 43.11a1.228 1.228 0 00.728 1.085 3.916 3.916 0 001.948.414 8.465 8.465 0 003.189-.5q1.2-.5 1.2-1.281a.924.924 0 00-.728-.89 6.551 6.551 0 00-2.088-.258h-2.145a2.587 2.587 0 00-1.491.413 1.2 1.2 0 00-.61 1.015m1.723-12.653q0 2.438 1.7 2.438a1.394 1.394 0 001.211-.6 3.115 3.115 0 00.428-1.807q0-2.466-1.639-2.465-1.7 0-1.7 2.437"/><path d="M297.209 21.307a2.319 2.319 0 01.687-1.836 4.344 4.344 0 014.443.014 2.3 2.3 0 01.7 1.822q0 2.41-2.928 2.41-2.9 0-2.9-2.41m5.619 19.828h-5.478V25.259h5.478z"/><path d="M314.428 37.085a8.15 8.15 0 002.648-.546v3.994a10.766 10.766 0 01-2.108.68 11.887 11.887 0 01-2.348.2 5.128 5.128 0 01-3.979-1.352 6.056 6.056 0 01-1.219-4.154v-6.545h-1.92v-2.229l2.44-1.724 1.415-3.335h3.587v3.181h3.894v4.106h-3.894v6.179q0 1.542 1.484 1.542"/><path d="M330.209 41.133l-1.05-2.1h-.113a6.2 6.2 0 01-2.255 1.878 7.455 7.455 0 01-2.971.506 4.66 4.66 0 01-3.531-1.346A5.249 5.249 0 01319 36.287a4.3 4.3 0 011.765-3.776 9.662 9.662 0 015.115-1.394l2.65-.085v-.223a1.723 1.723 0 00-1.936-1.962 11.56 11.56 0 00-4.414 1.177l-1.583-3.616a15.244 15.244 0 017.006-1.428 6.814 6.814 0 014.73 1.512 5.414 5.414 0 011.674 4.233v10.408zm-4.063-3.588a2.473 2.473 0 001.7-.629 2.1 2.1 0 00.707-1.64v-1.233l-1.261.056q-2.7.1-2.705 1.989 0 1.458 1.556 1.457"/><path d="M337.732 19.331h5.479v21.804h-5.479z"/><path d="M354.673 41.415a8.526 8.526 0 01-6.158-2.108 7.94 7.94 0 01-2.193-6.006 8.648 8.648 0 012.031-6.172 7.6 7.6 0 015.8-2.15 7.693 7.693 0 015.542 1.871 7.107 7.107 0 011.955 5.387v2.438h-9.795a2.719 2.719 0 00.973 2.089 3.823 3.823 0 002.5.756 12.086 12.086 0 002.656-.274 13.161 13.161 0 002.628-.931v3.937a9.642 9.642 0 01-2.662.911 18.454 18.454 0 01-3.28.252m-.322-12.71a2.281 2.281 0 00-1.618.61 2.856 2.856 0 00-.764 1.912h4.708a2.729 2.729 0 00-.65-1.834 2.152 2.152 0 00-1.676-.688"/><path d="M377.009 36.258a4.521 4.521 0 01-1.736 3.855 8.215 8.215 0 01-4.99 1.3 21.556 21.556 0 01-3.069-.19 12.986 12.986 0 01-2.662-.693v-4.385a16.492 16.492 0 002.8.924 11.728 11.728 0 002.712.365q1.777 0 1.779-.814a.918.918 0 00-.5-.749 22.729 22.729 0 00-2.894-1.281 7.2 7.2 0 01-3.053-2.041 4.643 4.643 0 01-.869-2.892 4.007 4.007 0 011.71-3.448 8.159 8.159 0 014.834-1.232 12.149 12.149 0 012.95.343 17.506 17.506 0 012.864 1l-1.484 3.531a16.592 16.592 0 00-2.313-.834 7.632 7.632 0 00-1.99-.343q-1.345 0-1.345.658a.82.82 0 00.469.694 25.387 25.387 0 002.712 1.17 10.449 10.449 0 012.487 1.345 4.037 4.037 0 011.205 1.549 5.432 5.432 0 01.385 2.164"/><path d="M114.046 72.55a4.753 4.753 0 01-2.964-.967 6.127 6.127 0 01-1.962-2.846 12.619 12.619 0 01-.694-4.385 10.281 10.281 0 011.556-6.054 4.965 4.965 0 014.274-2.186 4.9 4.9 0 012.333.533 5.15 5.15 0 011.829 1.793h.111a26.385 26.385 0 01-.266-3.728v-4.244h5.521v21.8h-4.133l-1.178-2h-.21a4.642 4.642 0 01-4.217 2.286m2.242-4.331a2.046 2.046 0 001.857-.828 4.988 4.988 0 00.581-2.548v-.436a5.549 5.549 0 00-.6-2.99 2.124 2.124 0 00-1.892-.891 1.853 1.853 0 00-1.674 1.016 5.765 5.765 0 00-.6 2.894 5.382 5.382 0 00.6 2.817 1.918 1.918 0 001.724.966"/><path d="M135.233 72.55a8.521 8.521 0 01-6.159-2.11 7.942 7.942 0 01-2.192-6 8.656 8.656 0 012.031-6.174 7.6 7.6 0 015.8-2.152 7.694 7.694 0 015.542 1.873 7.107 7.107 0 011.955 5.387v2.439h-9.795a2.718 2.718 0 00.973 2.088 3.82 3.82 0 002.5.756 12.029 12.029 0 002.655-.273 13.135 13.135 0 002.627-.932v3.938a9.738 9.738 0 01-2.661.912 18.456 18.456 0 01-3.28.252m-.322-12.711a2.281 2.281 0 00-1.619.609 2.87 2.87 0 00-.764 1.912h4.708a2.73 2.73 0 00-.65-1.834 2.149 2.149 0 00-1.675-.687"/><path d="M165.654 72.268l-1.008-3.839h-6.657l-1.037 3.839h-6.08l6.683-20.57h7.385l6.769 20.57zm-2.157-8.379l-.884-3.363q-.308-1.122-.749-2.9t-.582-2.551q-.126.715-.5 2.354t-1.647 6.46z"/><path d="M183.185 56.112a8.01 8.01 0 011.359.111l.308.057-.491 5.17a8.117 8.117 0 00-1.863-.168 3.552 3.552 0 00-2.607.82 3.222 3.222 0 00-.812 2.362v7.8h-5.478V56.391h4.076l.855 2.538h.267a5.5 5.5 0 011.913-2.04 4.586 4.586 0 012.473-.777"/><path d="M197.421 72.268l-1.05-2.1h-.113a6.219 6.219 0 01-2.255 1.877 7.423 7.423 0 01-2.971.506 4.663 4.663 0 01-3.531-1.346 5.245 5.245 0 01-1.289-3.783 4.308 4.308 0 011.765-3.778 9.658 9.658 0 015.114-1.394l2.648-.084v-.223a1.722 1.722 0 00-1.933-1.963 11.555 11.555 0 00-4.413 1.178l-1.584-3.615a15.229 15.229 0 017.006-1.43 6.805 6.805 0 014.73 1.514 5.413 5.413 0 011.674 4.232v10.41zm-4.063-3.586a2.476 2.476 0 001.7-.63 2.1 2.1 0 00.707-1.641v-1.232l-1.261.056q-2.7.1-2.7 1.988 0 1.46 1.556 1.459"/><path d="M219.926 56.391v2.649l-2.172.8a3.858 3.858 0 01.449 1.892 4.782 4.782 0 01-1.8 3.981 8.612 8.612 0 01-5.375 1.414 6.926 6.926 0 01-1.4-.112 1.46 1.46 0 00-.2.686c0 .272.22.479.658.625a5.667 5.667 0 001.724.217h2.635q5.337 0 5.339 4.5a5.1 5.1 0 01-2.474 4.512 12.675 12.675 0 01-6.943 1.611 9.969 9.969 0 01-5.207-1.127 3.6 3.6 0 01-1.828-3.244q0-2.845 3.532-3.672a3.161 3.161 0 01-1.269-1 2.128 2.128 0 01-.133-2.668 6.006 6.006 0 011.7-1.354 4.231 4.231 0 01-1.941-1.709 5.342 5.342 0 01-.708-2.83 4.881 4.881 0 011.766-4.021 7.834 7.834 0 015.045-1.43q.434 0 1.5.1t1.569.181zm-11.967 17.854a1.233 1.233 0 00.729 1.086 3.948 3.948 0 001.948.412 8.455 8.455 0 003.188-.5q1.2-.5 1.2-1.283a.924.924 0 00-.73-.889 6.481 6.481 0 00-2.088-.26h-2.144a2.6 2.6 0 00-1.492.414 1.2 1.2 0 00-.61 1.016m1.724-12.654q0 2.438 1.7 2.437a1.393 1.393 0 001.212-.6 3.129 3.129 0 00.428-1.807q0-2.467-1.64-2.467-1.7 0-1.7 2.438"/><path d="M237.498 64.296a8.4 8.4 0 01-2.1 6.074 7.752 7.752 0 01-5.865 2.18 7.6 7.6 0 01-5.752-2.229 9.656 9.656 0 01-.042-12.059 7.837 7.837 0 015.879-2.15 8.369 8.369 0 014.134.994 6.826 6.826 0 012.769 2.852 9.236 9.236 0 01.972 4.338M226.27 54.88v-.407q2.156-2.315 2.738-2.986c.389-.447.708-.85.961-1.2h6v.295q-1.12.9-3.083 2.283t-2.971 2.02zm.938 9.416a7.071 7.071 0 00.546 3.117 1.9 1.9 0 001.836 1.072 1.849 1.849 0 001.8-1.072 7.337 7.337 0 00.524-3.117 6.96 6.96 0 00-.531-3.069 2.112 2.112 0 00-3.631-.008 6.8 6.8 0 00-.546 3.077"/><path d="M250.642 72.268v-8.66a4.97 4.97 0 00-.455-2.389 1.556 1.556 0 00-1.465-.8 2.118 2.118 0 00-2 1.1 8.41 8.41 0 00-.616 3.8v6.949h-5.479V56.391h4.134l.687 1.963h.322a4.333 4.333 0 011.94-1.681 6.876 6.876 0 012.852-.561 5.413 5.413 0 014.1 1.527 5.97 5.97 0 011.464 4.3v10.326z"/></g><path d="M0 93.066h93.067V0H0zm87.674-5.394H5.395V5.394h82.279z"/></g></svg> </a> </desy-icon> </desy-footer>

 

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

Obligatorio

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.

hiddenText

string

Contenido del texto oculto en formato texto plano

 

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el elemento que contiene el Dropdown.

 

classesTooltip

string

Clases CSS separadas por espacio que se aplicarán sobre el tooltip.

 

classesContainer

string

Clases CSS separadas por espacio que se aplicarán sobre el container del componente.

 

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.

hiddenText

string

Contenido del texto oculto en formato texto plano

 

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el elemento que contiene el Dropdown.

 

classesTooltip

string

Clases CSS separadas por espacio que se aplicarán sobre el tooltip.

 

classesContainer

string

Clases CSS separadas por espacio que se aplicarán sobre el container del componente.

 

items

NavItemData