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 |