Versions Compared

Old Version 1

changes.mady.by.user Servicios Digitales de Aragón

Saved on

compared with

New Version Current

changes.mady.by.user Servicios Digitales de Aragón

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Table of Contents
maxLevel2
minLevel2
outlinefalse
typelist
printablefalse

Componentes relativos a navegación

...

Vamos a ver como se usa cada uno de los componentes.

 

Breadcrumbs

...

Code Block
languagexml
<desy-breadcrumbs ...></desy-breadcrumbs>

...

Expand
titlePropiedades de entrada

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

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.

Expand
titleContenido

Se permite proyectar contenido dentro de los elementos de breadcrumbs para facilitar su uso. Para ello se facilita el siguiente sub-componente:

BreadcrumbsItemComponent

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

Expand
titleEjemplos
implementación con 2 niveles
Code Block
languagexml
<desy-breadcrumbs [classes]="classes" id="implementacion2niveles"
    [items]="[{'text':'Section','routerLink':'/collapsible'},{'text':'Sub-section','routerLink':'/fieldset'}]">
</desy-breadcrumbs>

 

Image Modified

Implementación con 3 niveles y collapseOnMobile=true
Code Block
languagexml
<desy-breadcrumbs [classes]="classes" id="implementacion3niveles" [collapseOnMobile]=true
    [items]="[{'text':'Home','routerLink':'/'},{'text':'Section','routerLink':'/collapsible'},{'text':'Sub-section','routerLink':'/fieldset'}]">
</desy-breadcrumbs>

 

Image Removed

Image Added

Implementación con contenido
Code Block
languagexml
<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
...
 Code Block
languagexml
<desy-error-summary ...>...</desy-error-summary>
Permite representar un resumen de errores
...
 
 Expand
titlePropiedades de entrada
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
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.
 
 Expand
titleContenido
Se permite proyectar contenido dentro del ErrorSummary para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
TitleComponent
 Code Block
<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
 Code Block
<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
 Code Block
<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.
 Expand
titleEjemplos
Image Modified
Con contenido
 Code Block
languagexml
<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>
 
Image Modified
 Code Block
languagexml
<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>
...
Image Modified
 Code Block
languagexml
<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>
...
 
...
 Code Block
languagexml
<desy-footer ...></desy-footer>
Permite representar un pie de página
...
 
 
 Expand
titlePropiedades de entrada
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
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
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
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
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
html
string
Contenido del texto en formato HTML.
...
 
 
Propiedades de accesibilidad
El componente, MetaItemData y NavigationItemData admiten los siguientes parámetros de accesibilidad.
 Expand
titleContenido
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.
 Expand
titleEjemplos
Image Modified
Completo con contenido
 Code Block
languagexml
<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-description>
    Descripción
  </desy-description>
</desy-footer>
 
Image Modified
Básico
 Code Block
languagexml
<desy-footer></desy-footer>
...
Image Modified
Con meta e items
 Code Block
languagexml
<desy-footer [meta]="{'items': [{'href': '#1','text': 'Item 1'},{'href': '#2','text': 'Item 2'},{'href': '#3','text': 'Item 3'}]}"></desy-footer>
 
Header
...
 Code Block
languagexml
<desy-header ...></desy-header>
...
 Expand
titlePropiedades de entrada
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.
 
noLogo
boolean
Controla si el pie de página muestra o no la imagen de la bandera Europea
 
customLogoHtml
string
Permite insertar código HTML para mostrar un logotipo personalizado
 
customNavigationHtml
string
Permite insertar código HTML para navegar
 
 
Objeto HeaderSubnavData
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
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
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
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.
Ver componente Nav.
 
Objeto HeaderOffcanvasData
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í
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.
 Expand
titleContenido
Se permite proyectar contenido dentro de header para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
HeaderSubnavComponent
<desy-header-subnav>...</desy-header-subnav>
Permite especificar el elemento subnav.
A su vez, admite como contenido:
  • El componente NavComponent, con sus respectivos items. El resto de parámetros de este componente no es necesario especificarlos, ya que dentro del header tendrán valores fijos.
  • Cualquier otro contenido, que será interpretado como el texto a mostrar junto al logo.
HeaderNavigationComponent
<desy-header-navigation>...</desy-header-navigation>
Permite especificar el elemento navigation. Admite él parámetro de entrada classes, especificado en HeaderNavigationData. 
Cada item se puede especificar mediante subcomponente HeaderNavigationItemComponent. Este componente admite los mismos parámetros de entrada que el objeto HeaderNavigationItemData.
<desy-header-navigation-item>...</desy-header-navigation-item>
HeaderDropdownComponent
<desy-header-dropdown>...</desy-header-dropdown>
Permite especificar el elemento dropdown. Admite él el parámetro de entrada classes, especificado en HeaderDropdownData. 
A su vez, admite como contenido:
  • El componente NavComponent, con sus respectivos items. El resto de parámetros de este componente no es necesario especificarlos, ya que dentro del header tendrán valores fijos.
  • El componente ContentComponent, del módulo CommonsModule, cuyo contenido será incluido en el menú desplegable en lugar del NavComponent.
  • Cualquier otro contenido, que será interpretado como el contenido a mostrar en el botón.
HeaderOffcanvasComponent
<desy-header-offcanvas>...</desy-header-offcanvas>
Permite especificar el elemento offcanvas. Admite él parámetro de entrada classes, especificado en HeaderOffcanvasData. 
A su vez, admite como contenido:
  • El componente HeaderOffcanvasButtonComponent, cuyo contenido será interpretado como el contenido a mostrar en el botón.
  • El componente HeaderOffcanvasCloseButtonComponent, cuyo contenido será interpretado como el contenido a mostrar en el botón de cerrar una vez desplegado el menú.
  • El componente ContentComponent, del módulo CommonsModule, cuyo contenido será interpretado como el contenido principal del menú lateral.
HeaderCustomNavigationComponent
 Code Block
<desy-header-custom-navigation>...</desy-header-custom-navigation>
Permite especificar un componente Navigation personalizado dentro de la cabecera.
Skiplink
<desy-skip-link>...</desy-skip-link>
Permite especificar un componente SkipLink personalizado dentro de la cabecera. Si no se especifica el id, su valor será “skip-link”. Si no se especifica contenido, el texto mostrará “Saltar al contenido principal”.
 Expand
titleEjemplos
Header en pantalla grande
Image RemovedImage Added
Header en pantalla mobile
 Image Added
Image Removed
Menu lateral desplegado en pantalla mobile
Image RemovedImage Added
 
implementación con contenido
 Code Block
languagexml
<desy-header [homepageRouterLink]="'/'" [expandedLogo]="true">
  <desy-header-subnav>Desy-angular</desy-header-subnav>
  <desy-header-navigation>
    <desy-header-navigation-item>Item Nav 1</desy-header-navigation-item>
    <desy-header-navigation-item [routerLink]="'../'">Item Nav 2</desy-header-navigation-item>
  </desy-header-navigation>
  <desy-header-dropdown>Dropdown
    <desy-nav>
      <desy-nav-item [href]="'http://google.es'">Item Dropdown 1</desy-nav-item>
      <desy-nav-item [routerLink]="'../'">Item Dropdown 2</desy-nav-item>
    </desy-nav>
  </desy-header-dropdown>
  <desy-header-offcanvas>
    <desy-header-offcanvas-button>Menu</desy-header-offcanvas-button>
    <desy-header-offcanvas-close-button>Cerrar</desy-header-offcanvas-close-button>
    <desy-content>
      <ul>
        <li>
          <h3 class="p-base text-base font-bold" id="header-offcanvas-menu-title">Componentes</h3>
          <desy-nav [idPrefix]="'nav1'" 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 [idPrefix]="'nav2'"classes="bg-warning-light" [items]="[{ text: 'Desy-frontend', href: 'http://desy.jesuscuadra.es/', target: '_blank' }]"></desy-nav>
        </li>
      </ul>
    </desy-content>
  </desy-header-offcanvas>
</desy-header>
implementación con parámetros
 Code Block
languagexml
<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 }">
  <ng-template #headerOffCanvasMenu>
    <ul>
      <li>
        <h3 class="p-base text-base font-bold" id="header-offcanvas-menu-title">Componentes</h3>
        <desy-nav [idPrefix]="'nav1'" 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 [idPrefix]="'nav2'" classes="bg-warning-light" [items]="[{ text: 'Desy-frontend', href: 'http://desy.jesuscuadra.es/', target: '_blank' }]"></desy-nav>
      </li>
    </ul>
  </ng-template>
</desy-header>
 
...
 Code Block
...
code
language
xml
<desy-menulinks-navigation list ...>...</desy-menu-></desy-links-list>
Permite representar una lista de enlaces.
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
hasNav
boolean
Indica que los enlaces se encapsularán en un nav. Por defecto true.
idPrefix
string
Prefijo que se añadirá a todos los ids de los enlaces.
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
 Expand
titleContenido
Se permite proyectar contenido dentro de links-list para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
LinksListItemComponent
<desy-links-list-item>...</desy-links-list-item>
Permite especificar un item de enlace.
Tiene las siguientes propiedades de entrada:
Propiedad
Tipo
Descripción
Obligatorio
id
string
Id del enlace
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el enlace.
containerClasses
string
Clases CSS sepearadas por espacio que se aplicarán sobre el elmento que contiene al enlace.
title
string 
Propiedad title a añadir al enlace.
href
string
Ruta externa a la que se redirigirá al pulsar el item.  No se aplicará cuando se especifique la propiedad routerLink. 
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
routerLink
string | any[] | null
Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). No se aplicará cuando se especifique la propiedad href. 
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.
active
boolean
Permite indicar que el enlace se encuentra activo.
disabled
boolean
Permite indicar que el enlace se encuentra deshabilitado.
El componente admite los siguientes parámetros de accesibilidad.
A su vez, admite como contenido:
  • Conenitdo HTML;que será proyectado como el literal a motrar en el enlace.
  • El componente LinksListItemSubComponent, para incluir contenido informativo bajo el enlace:
    <desy-links-list-item-sub>...</desy-links-list-item-sub>
    Admite el parámetro de entrada classes para añadir clases CSS al contenedor de este elemento.
    El componente admite los siguientes parámetros de accesibilidad.
  • El componente IconComponent, para incluir un icono
 Expand
titleEjemplos
Ejemplo con contenido
Image Added
 Code Block
languagexml
<desy-links-list [hasNav]="true" [classes]="'mb-base'" [idPrefix]="'enlaces-1'">
    <desy-links-list-item [href]="'https://aragon.es'" [disabled]="true">Item  con enlace</desy-links-list-item>
    <desy-links-list-item [href]="'https://aragon.es'">Item desactivado</desy-links-list-item>
    <desy-links-list-item  [active]="true">Item activo sin enlace</desy-links-list-item>
    <desy-links-list-item [href]="'https://aragon.es'" >
        <desy-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></desy-icon>
        Item con icono
    </desy-links-list-item>
    <desy-links-list-item [href]="'https://aragon.es'" [classes]="'flex justify-between items-center py-base text-2xl'">
        <desy-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></desy-icon>
        Item tamaño grande
    </desy-links-list-item>
</desy-links-list>
MenuNavigation
...
 Code Block
languagexml
<desy-menu-navigation ...>...</desy-menu-navigation>
Permite representar un menú de navegación tanto con items simples como items con un listado de items desplegable.
...
 
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
idPrefix
string
Prefijo para el id de los items.
...
 
items
MenuNavigationItem[]
Elementos del menú. 
Sí
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
...
 
MenuNavigationItem
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item.
Sí
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
active
boolean
Indica si el item se muestra seleccionado.
...
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el item.
...
disabled
boolean
Indica si el item está deshabilitado.
...
href
string
Ruta externa a la que se redirigirá al pulsar el item.
...
 
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp ).
...
title
string
Propiedad title a incorporar en el elemento.
...
 
sub
MenuNavigationItemSubItem
Datos del subMenu. 
...
divider
DividerData
Datos del divider
...
expanded
boolean
Indica si esta expandido
...
 
El item admite los siguientes parámetros de accesibilidad
MenuNavigationItemSubItem
Propiedad
Tipo
Descripción
Obligatorio
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
...
items
MenuNavigationItemSubItemSubItem[]
Items del submenu
...
El itemSub admite los siguientes parámetros de accesibilidad
MenuNavigationItemSubItemSubItem
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item.
Sí
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el item.
...
disabled
boolean
Indica si el item está deshabilitado.
...
 
href
string
Ruta externa a la que se redirigirá al pulsar el item.
...
 
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp ).
...
 
divider
DividerData
Datos del divider
...
 
expanded
boolean
Indica si esta expandido
...
 
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad
DividerData
Propiedad
Tipo
Descripción
Obligatorio
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
 Expand
titleEventos de salida
Evento
Tipo
Descripción
itemsChange
MenuNavigationItem[]
Se emite cuando se modifican propiedades de los items. 
activeItemChange
MenuNavigationItem
Se emite el item seleccionado.
activeSubItemChange
MenuNavigationItemSubItem
Se emite el sub-item seleccionado.
...
 Expand
titleContenido
Se permite proyectar contenido dentro del menubar para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
MenuNavigationItemComponent
 Code Block
languagexml
<desy-menu-navigation-item ... (selected)="...">Item 1 ...</desy-menu-navigation-item>
Permite especificar un item del listado. 
Admite los mismos parámetros de entrada que el objeto MenuNavigationItem.
Emite el evento de salida selected al seleccionarse.
MenuNavigationSubItemComponent
 Code Block
languagexml
<desy-menu-navigation-subitem ... (selected)="..." (checkedChange)="...">SubItem 1 ...</desy-menu-navigation-subitem>
Permite especificar un subitem dentro de un elemento desy-menu-navigation-item. 
Admite los mismos parámetros de entrada que el objeto MenuNavigationItemSubItem.
Emite el evento de salida selected al seleccionarse.
 Expand
titleEjemplos
MenuNavigation con items estáticos
 Code Block
languagexml
<desy-menu-navigation [id]="'with-all-parent-items-1'"
              [idPrefix]="'parent-example'"
              [ariaLabel]="'Menubar description'"
              [items]="[ { text: 'Menuitem', ariaLabel: 'Menuitem', id: 'menuitems-example-item-1-1', divider: {html: htmlDivider}, sub: { items: [ { role: 'menuitem', text: 'Subitem 1' }, { role: 'menuitem', text: 'Subitem 2' }, { role: 'menuitem', text: 'Subitem 3' } ]}}, { text: 'Menuitem solo', ariaLabel: 'Menuitem solo', id: 'menuitems-example-item-6-1', classes: 'c-menubar__button--transparent', href: '#', divider: {html: htmlDivider} }, { text: 'Menuitem disabled', ariaLabel: 'Menuitem disabled', id: 'menuitems-example-item-7-1', disabled: true, href: '#' } ]"
              (activeItemChange)="handleActiveItemChange($event)"
              (activeSubItemChange)="handleActiveSubItemChange($event)"></desy-menu-navigation>
Image Modified
...
Menubar con items como contenido
 Code Block
languagexml
<desy-menu-navigation [id]="id"
              [idPrefix]="idPrefix"
              [classes]="classes"
              [(items)]="items"
              [ariaLabel]="ariaLabel"
              [ariaDescribedBy]="ariaDescribedBy"
              [ariaLabelledBy]="ariaLabelledBy"
              [ariaHidden]="ariaHidden"
              [ariaDisabled]="ariaDisabled"
              [ariaControls]="ariaControls"
              [ariaCurrent]="ariaCurrent"
              [ariaLive]="ariaLive"
              [ariaErrorMessage]="ariaErrorMessage"
              [tabindex]="tabindex"
              (activeItemChange)="handleActiveItemChange($event)"
              (activeSubItemChange)="handleActiveSubItemChange($event)">
            
              <desy-menu-navigation-item *ngFor="let i of items"
              [href]="i.href"
              [target]="i.target"
              [id]="i.id + '-projected'"
              [ariaLabel]="i.ariaLabel"
              [sub]="i.sub"
              [classes]="i.classes"
              [title]="i.title"
              [disabled]="i.disabled"
              [divider]="i.divider"
              [active]="i.active" (selected)="setLastClickedItemText('Item' + (i.html ? i.html : i.text))">
              
                <ng-container *ngIf="i.html; else isText">
                <span [innerHTML]="i.html"></span>
                </ng-container>
                <ng-template #isText>
                <p>{{ i.text }}</p>
                </ng-template>

                  <ng-container *ngIf="i.sub && i.sub.items">
                  <desy-menu-navigation-subitem *ngFor="let si of i.sub.items"
                                      [role]="si.role"
                                      [ariaLabel]="si.ariaLabel"
                                      [(checked)]="si.checked"
                                      (selected)="setLastClickedItemText('Subitem ' + (si.html ? ss.html : si.text))">
                  <ng-container *ngIf="si.html; else isTextSubitem">
                    <span [innerHTML]="si.html"></span>
                  </ng-container>
                  <ng-template #isTextSubitem>
                    <p>{{ si.text }}</p>
                  </ng-template>                  
                  </desy-menu-navigation-subitem>
                  </ng-container>
              </desy-menu-navigation-item>            
</desy-menu-navigation>
Image Modified
...
Menubar
...
 Code Block
...
code
language
xml
<desy-menubar ...>...</desy-menubar>
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del menú.
 
idPrefix
string
Prefijo para el id de los items.
 
items
MenubarItem[]
Elementos del menú. Admite double-binding para admitir modificaciones sobre los items (como activar/desactivar items de tipo checkbox).
Sí
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
 
labelText
string
Título o etiqueta. Puede especificarse utilizando una de las siguientes opciones:
  • anidando el componente desy-menubar-label (ver apartado Proyección de contenido)
  • labelText: texto de título.
  • labelData: objeto que contiene toda la información de un componente Label.
  • labelRef: tag de un ng-template que contenga un componente Label.
Si se especifican varias, se aplicará la opción que admite mayor personalización: desy-menubar-label → labelRef → labelData → labelText.
 
labelData
LabelData
 
labelRef
TemplateRef <LabelComponent>
 
MenubarItem
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item.
Sí
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
active
boolean
Indica si el item se muestra seleccionado.
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el item.
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 o se aporte el elemento sub y/o subitems.
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
 
routerLink
string|string[]
Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). 
No se aplicará cuando se aporte el elemento sub y/o subitems.
routerLinkActiveClasses
string
 
 
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.
title
string
Propiedad title a incorporar en el elemento.
 
ariaLabel
string
En caso de tener subMenu, propiedad ariaLabel a incorporar en el elemento ul.
 
sub
MenubarItemSub
Datos del subMenu. 
 
El item admite los siguientes parámetros de accesibilidad
MenubarItemSub
Propiedad
Tipo
Descripción
Obligatorio
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
items
MenubarItemSubItem[]
Items del submenu
 
El itemSub admite los siguientes parámetros de accesibilidad
MenubarItemSubItem
Propiedad
Tipo
Descripción
Obligatorio
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
role
string
Tipo de item. Se contemplan los siguientes:
  • menuitem: item normal
  • none: item no interactuable
  • group: grupo de items
  • menuitemcheckbox: checkbox individual
    • separator: elemento de separación
Sí
checked
boolean
Si es role=menuitemcheckbox, indica si está seleccionado
 
items
MenubarItemSubItemSubItem[]
Sub-items cuando se especifique role=group.
 
MenubarItemSubItemSubItem
Propiedad
Tipo
Descripción
Obligatorio
role
string
Tipo de item. Se contemplan los siguientes:
  • menuitem: item normal
  • none: item no interactuable
  • group: grupo de items
  • menuitemcheckbox: item tipo checkbox
  • menuitemradio: item tipo radio
Sí
items
MenubarItemSubItem[]
Items del submenu
 
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
checked
boolean
Si es role=menuitemcheckbox o role=menuitemradio, indica si está seleccionado
 
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad
 Expand
titleEventos de salida
Evento
Tipo
Descripción
itemsChange
MenubarItem[]
Se emite cuando se modifican propiedades de los items. 
activeItemChange
MenubarItem
Se emite el item seleccionado.
activeSubItemChange
MenubarItemSubItem o MenubarItemSubItemSubItem
Se emite el sub-item seleccionado.
 
 Expand
titleContenido
Se permite proyectar contenido dentro del menubar para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
MenubarLabelComponent
 Code Block
languagexml
<desy-menubar-label classes="...">Texto de label</desy-menubar-label>
Permite especificar el label sin utilizar los parámetros de entrada. Admite el parámetro classes. 
MenubarItemComponent
 Code Block
languagexml
<desy-menubar-item ... (selected)="...">Item 1 ...</desy-menubar-item>
Permite especificar un item del listado. 
Admite los mismos parámetros de entrada que el objeto MenubarItem.
Emite el evento de salida selected al seleccionarse.
MenubarSubItemComponent
 Code Block
languagexml
<desy-menubar-subitem ... (selected)="..." (checkedChange)="...">SubItem 1 ...</desy-menubar-subitem>
Permite especificar un subitem dentro de un elemento desy-menubar-item. 
Admite los mismos parámetros de entrada que el objeto MenubarItemSubItem.
Emite el evento de salida selected al seleccionarse.
En el caso de role=menuitemcheckbox, se emite el valor de checked en el evento checkedChange al modificarse.
MenubarSubSubItemComponent
 Code Block
languagexml
<desy-menubar-subsubitem ... (selected)="..." (checkedChange)="...">SubSubItem 1 ...</desy-menubar-subsubitem>
Permite especificar un subitem dentro de un elemento desy-menubar-subitem, en el caso de que este tenga role=group.
Admite los mismos parámetros de entrada que el objeto MenubarItemSubItemSubItem.
Emite el evento de salida selected al seleccionarse. 
En el caso de role=menuitemcheckbox o role=menuitemradio, se emite el valor de checked en el evento checkedChange al modificarse.
 Expand
titleEjemplos
Menubar con items estáticos
 Code Block
languagexml
<desy-menubar [id]="'with-all-parent-items-1'"
              [idPrefix]="'parent-example'"
              [labelText]="'Ejemplo con items estáticos'"
              [ariaLabel]="'Menubar description'"
              [items]="[ { text: 'Menuitem', ariaLabel: 'Menuitem', id: 'menuitems-example-item-1-1', sub: { items: [ { role: 'menuitem', text: 'Subitem 1' }, { role: 'menuitem', text: 'Subitem 2' }, { role: 'menuitem', text: 'Subitem 3' } ], ariaLabelledby: 'menuitems-example-item-1-1' }, classes: 'mb-base mr-base' }, { text: 'Menuitemcheckbox', ariaLabel: 'Menuitemcheckbox', id: 'menuitems-example-item-2-1', classes: 'mb-base mr-base', sub: { items: [ { role: 'menuitemcheckbox', text: 'Subitem 1' }, { role: 'menuitemcheckbox', text: 'Subitem 2' }, { role: 'menuitemcheckbox', text: 'Subitem 3' } ], ariaLabelledby: 'menuitems-example-item-2-1' } }, { text: 'Menuitemradio', ariaLabel: 'Menuitemradio', id: 'menuitems-example-item-3-1', sub: { items: [ { role: 'group', text: 'Group', items: [ { role: 'menuitemradio', text: 'Radio 1' }, { role: 'menuitemradio', text: 'Radio 2' }, { role: 'menuitemradio', text: 'Radio 3' } ] } ], ariaLabelledby: 'menuitems-example-item-3-1' }, classes: 'mb-base mr-base' }, { text: 'Mixed items', ariaLabel: 'Mixeditems', id: 'menuitems-example-item-4-1', sub: { items: [ { role: 'group', ariaLabel: 'Tamaño de letra', items: [ { role: 'menuitem', text: 'Tamaño mayor' }, { role: 'menuitem', text: 'Tamaño mayor' } ] }, { role: 'separator' }, { role: 'group', ariaLabel: 'Estilo de letra', items: [ { role: 'menuitemcheckbox', text: 'Negritas' }, { role: 'menuitemcheckbox', text: 'Itálicas' } ] }, { role: 'separator' }, { role: 'group', ariaLabel: 'Estilo de texto', items: [ { role: 'menuitemradio', text: 'Ninguno' }, { role: 'menuitemradio', text: 'Tachado' }, { role: 'menuitemradio', text: 'Subrayado' } ] } ], ariaLabelledby: 'menuitems-example-item-4-1' }, classes: 'mb-base mr-base' }, { text: 'Menuitem solo', ariaLabel: 'Menuitem solo', id: 'menuitems-example-item-6-1', classes: 'c-menubar__button--transparent mb-base mr-base', href: '#' } ]"
              (itemsChange)="handleItemsChange($event)"></desy-menubar>
 
Menubar con items como contenido
 Code Block
languagexml
<desy-menubar [id]="'with-content-items'"
              [idPrefix]="'parent-example'"
              [classes]="'c-menubar--last-right'"
              [ariaLabel]="'Menubar description'">
  <desy-menubar-label>Ejemplo con items como contenido</desy-menubar-label>
  <desy-menubar-item [ariaLabel]="'Menuitem'" [id]="'menuitems-example-item-1-1'"
                     [classes]="'mb-base mr-base'" [sub]="{ariaLabelledby: 'menuitems-example-item-1-1'}">
    MenuItem
    <desy-menubar-subitem [role]="'menuitem'" (selected)="handle()">Subitem 1</desy-menubar-subitem>
    <desy-menubar-subitem [role]="'menuitem'">Subitem 2</desy-menubar-subitem>
    <desy-menubar-subitem [role]="'menuitem'">Subitem 3</desy-menubar-subitem>
  </desy-menubar-item>
  <desy-menubar-item [ariaLabel]="'Menuitemcheckbox'" [id]="'menuitems-example-item-2-1'"
                     [classes]="'mb-base mr-base'" [sub]="{ariaLabelledby: 'menuitems-example-item-2-1'}">
    Menuitemcheckbox
    <desy-menubar-subitem [role]="'menuitemcheckbox'">Subitem 1</desy-menubar-subitem>
    <desy-menubar-subitem [role]="'menuitemcheckbox'">Subitem 2</desy-menubar-subitem>
    <desy-menubar-subitem [role]="'menuitemcheckbox'">Subitem 3</desy-menubar-subitem>
  </desy-menubar-item>
  <desy-menubar-item [ariaLabel]="'Menuitemradio'" [id]="'menuitems-example-item-3-1'"
                     [classes]="'mb-base mr-base'" [sub]="{ariaLabelledby: 'menuitems-example-item-3-1'}">
    Menuitemradio
    <desy-menubar-subitem [role]="'group'">
      <desy-menubar-subsubitem [role]="'menuitemradio'">Radio 1</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitemradio'">Radio 2</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitemradio'">Radio 3</desy-menubar-subsubitem>
    </desy-menubar-subitem>
  </desy-menubar-item>
  <desy-menubar-item [ariaLabel]="'Mixeditems'" [id]="'menuitems-example-item-4-1'"
                     [classes]="'mb-base mr-base'" [sub]="{ariaLabelledby: 'menuitems-example-item-4-1'}">
    Mixed items
    <desy-menubar-subitem [role]="'group'" [ariaLabel]="'Tamaño de letra'">
      <desy-menubar-subsubitem [role]="'menuitem'">Tamaño mayor</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitem'">Tamaño menor</desy-menubar-subsubitem>
    </desy-menubar-subitem>
    <desy-menubar-subitem [role]="'separator'"></desy-menubar-subitem>
    <desy-menubar-subitem [role]="'group'" [ariaLabel]="'Estilo de letra'">
      <desy-menubar-subsubitem [role]="'menuitemcheckbox'">Negritas</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitemcheckbox'">Itálicas</desy-menubar-subsubitem>
    </desy-menubar-subitem>
    <desy-menubar-subitem [role]="'separator'"></desy-menubar-subitem>
    <desy-menubar-subitem [role]="'group'" [ariaLabel]="'Estilo de texto'">
      <desy-menubar-subsubitem [role]="'menuitemradio'">Ninguno</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitemradio'">Tachado</desy-menubar-subsubitem>
      <desy-menubar-subsubitem [role]="'menuitemradio'">Subrayado</desy-menubar-subsubitem>
    </desy-menubar-subitem>
  </desy-menubar-item>
  <desy-menubar-item [ariaLabel]="'Menuitem solo'" [id]="'menuitems-example-item-6-1'"
                     [classes]="'c-menubar__button--transparent mb-base mr-base'"
                     [href]="'https://www.aragon.es/'" [target]="'_blank'">
    Link href
  </desy-menubar-item>
  <desy-menubar-item [ariaLabel]="'Menuitem solo routerLink'" [id]="'menuitems-example-item-6-1'"
                     [classes]="'c-menubar__button--transparent mb-base mr-base'"
                     [routerLink]="'/listbox'">
    Link routerLink
  </desy-menubar-item>
</desy-menubar>
 
 
Menu-horizontal
...
 Code Block
languagexml
<desy-menu-horizontal ...></desy-menu-horizontal>
...
 Expand
titlePropiedades de entrada
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
id
string
Identificador del item.
text
string
Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifica html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifica text.
active
boolean
Indica si el item está actualmente seleccionado.
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
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. 
Sí, cuando no se especifica routerLink.
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
 
routerLink
string|string[]
Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
Sí, cuando no se especifica href.
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.
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad
 Expand
titleEventos de salida
Evento
Tipo
Descripción
clickEvent
MenuHorizontalItemEventData
Se emite al pulsar sobre un ítem.
MenuHorizontalItemEventData
Evento
Tipo
Descripción
item
MenuHorizontalItemData
Ítem sobre el que se ha pulsado.
event
DOM Event
Datos del evento emitido.
 Expand
titleContenido
Se permite proyectar contenido dentro del menu-horizontal para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
MenuHorizontalItemComponent
 Code Block
languagexml
<desy-horizontal-item ...>...</desy-horizontal-item>
Permite especificar un item del menu.
Admite los mismos parámetros de entrada que el objeto MenuHorizontalItemData. La propiedad active admite double-binding, pues la propiedad se modifica internamente.
Emite el evento de salida clickEvent al hacer click sobre el item. El evento emitido es del tipo MenuHorizontalItemEventData.
Emite el evento de salida activeChange al modificarse internamente el valor de la propiedad active. El evento emitido es de tipo boolean.
 Expand
titleEjemplos
Menú horizontal con estilo de pestañas
 Code Block
languagexml
<desy-menu-horizontal classes="c-menu-horizontal--tabs mb-5" [items]="[{ text: 'item1', active: true, href: '...' }, { text: 'item2', href: '...' }, { text: 'item3', routerLink: '...' }]"></desy-menu-horizontal>
Menú horizontal con estilo de pestañas e items como contenido
 Code Block
languagexml
<desy-menu-horizontal classes="c-menu-horizontal--tabs mb-5">
  <desy-menu-horizontal-item [href]="'...'" [(active)]="active1" (clickEvent)="clickItem1($event)">item1</desy-menu-horizontal-item>
  <desy-menu-horizontal-item [href]="'...'">item2</desy-menu-horizontal-item>
  <desy-menu-horizontal-item [routerLink]="'...'">item3</desy-menu-horizontal-item>
</desy-menu-horizontal>
 
 
Menu-vertical
...
 Code Block
languagexml
<desy-menu-vertical...></desy-menu-vertical>
...
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del menú.
 
idPrefix
string
Prefijo para el id de los items. Por defecto ‘nav-item’.
 
hasUnderline
boolean
Indica si los items con enlace deben aparecer subrayados.
 
items
MenuVerticalItemsData[]
Elementos del menú.
Sí
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
 
 
MenuVerticalItemsData
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item.
text
string
Contenido del texto de ayuda 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
Permite resaltar el ítem cuando se considere activo.
 
expanded
boolean
Indica si el item está actualmente colapsado.
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
disabled
boolean
Indica si el item está deshabilitado.
href
string
Ruta externa a la que se redirigirá al pulsar el item.   
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
 
routerLink
string|string[]
Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). No se aplicará cuando se especifique la propiedad href.
routerLinkActiveClasses
string
Clases que se aplicarán sobre el routerLink
 
fragment
string
Propiedad de routerlink para especificar el anchor. Por defecto content. No se aplicará cuando se especifique la propiedad href.
(ver https://angular.io/api/router/RouterLink).
Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.
divider
boolean
Añade una línea divisoria a continuación del elemento.
 
title
string
Atributo title que se agregará al elemento.
 
sub
MenuverticalSubData
Objeto que contiene la información relativa a los elementos secundarios
 
Objeto MenuverticalSubData
Propiedad
Tipo
Descripción
Obligatorio
html
string
Contenido del texto en formato HTML. Sólo se muestra cuando no se indican items.
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
 
items
MenuVerticalSubItemsData[]
Elementos del sub.
 
MenuVerticalSubItemsData
Contiene las mismas propiedades que el objeto MenuVerticalItemsData, salvo sub.
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
 Expand
titleContenido
Se permite proyectar contenido dentro de menu-vertical para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
MenuVerticalItemComponent
<desy-menu-vertical-item>...</desy-menu-vertical-item>
Permite especificar cada item del menú. Admite los mismos parámetros de entrada que el objeto MenuVerticalItemsData. 
A su vez admite como contenido:
  • El componente MenuVerticalItemSubComponent, que será interpretado como el sub.
  • Cualquier otro contenido, que será interpretado como la etiqueta a mostrar en el item.
MenuVerticalItemSubComponent
<desy-menu-vertical-item-sub>...</desy-menu-vertical-item-sub>
Permite especificar el sub, o contenido adicional, dentro de un item. Admite los mismos parámetros de entrada que el objeto MenuverticalSubData. 
A su vez admite como contenido:
  • Un listado de componentes MenuVerticalItemSubItemComponent, que será interpretado como el sub.
  • Cualquier otro contenido, que será añadido bajo la etiqueta del item al que pertenece si no se especifican sub-items.
MenuVerticalItemSubItemComponent
Permite especificar cada sub-item del sub. Admite los mismos parámetros de entrada que el objeto MenuVerticalSubItemsData. 
El contenido será interpretado como la etiqueta a mostrar en el sub-item.
 Expand
titleEjemplos
 
Image Modified
Ejemplo con contenido
 Code Block
languagexml
<desy-menu-vertical [id]="'id'">
  <desy-menu-vertical-item>Item 1</desy-menu-vertical-item>
  <desy-menu-vertical-item>Item 2
    <desy-menu-vertical-item-sub>Html del sub</desy-menu-vertical-item-sub>
  </desy-menu-vertical-item>
  <desy-menu-vertical-item>Item 3
    <desy-menu-vertical-item-sub>
      <desy-menu-vertical-item-sub-item>Subitem 1</desy-menu-vertical-item-sub-item>
      <desy-menu-vertical-item-sub-item>Subitem 2</desy-menu-vertical-item-sub-item>
      <desy-menu-vertical-item-sub-item>Subitem 3</desy-menu-vertical-item-sub-item>
    </desy-menu-vertical-item-sub>
  </desy-menu-vertical-item>
</desy-menu-vertical>
 
 
Image Modified
Ejemplo con parámetros
 Code Block
languagexml
<desy-menu-vertical idPrefix="default-example" 
    [items]="[{'text':'Item 1','href':'http://www.google.com'},
        {'text':'Item 2','href':'http://www.google.com'},
        {'text':'Item 3','href':'http://www.google.com'}]"
        ariaLabel="Menu vertical" ></desy-menu-vertical>
 
Image Modified
Con disabled, target, long text item y divider
 Code Block
languagexml
<desy-menu-vertical idPrefix="divider-example"
        [items]="[{'text':'Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.','href':'http://www.google.com','target':'_blank'},
                {'text':'Item 2','href':'http://www.google.com','target':'_blank','divider':'true'},
                {'text':'Item 3','href':'http://www.google.com','target':'_blank'},
                {'text':'Item 4','href':'http://www.google.com','disabled':'true','target':'_blank'}]"
        ariaLabel="Menu vertical"></desy-menu-vertical>
 
Image Modified
Con estilos, sub-items, y html
 Code Block
languagexml
<desy-menu-vertical idPrefix="parent-example" classes="bg-warning-light"
                    [items]="[{'text':'Item 1','id':'parent-example-item-1','classes':'bg-warning-base','expanded':'true','sub':{'classes':'border-l-4 border-alert-base bg-alert-light','items':[{'text':'Subitem 1'},{'text':'Subitem 2','classes':'border-2 border-alert-base text-alert-base bg-white'},{'text':'Subitem 3'}]}},
                    {'text':'Item 2','id':'parent-example-item-2','sub':{'items':[{'text':'Subitem 1','divider':'true'},{'text':'Subitem 2','disabled':'true'},{'text':'Subitem 3','active':'true'}]}},
                    {'text':'Item 3','sub':{'html': 'Ejemplo con <strong>HTML</strong>'}}]"
                    ariaLabel="Menu vertical"></desy-menu-vertical>
 
Nav
...
 Code Block
languagexml
<desy-nav ...></desy-nav>
Permite representar un menú de navegación
...
 
 
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del menú.
...
 
hasNav
boolean
Indica si Nav debe contener un elemento <nav>. Si es false, se asume se deberá colocar el componente dentro de un <nav> externo con su propio aria-label. Por defecto equivale a true.
...
 
idPrefix
string
Prefijo para el id de los items. 
Sí
items
NavItemData[]
Elementos del menú.
Sí
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
...
 
NavItemData
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del item.
text
string
Contenido del texto de ayuda 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.
...
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el componente.
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. 
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
...
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.
title
string
Atributo title que se agregará al elemento.
...
 
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad
 Expand
titleContenido
Se permite proyectar contenido dentro de los elementos de nav para facilitar su uso. Para ello se facilita el siguiente sub-componente:
NavItemComponent
 Code Block
<desy-nav-item ...>...</desy-nav-item>
Permite utilizar el contenido especificado como item del menú de navegación a mostrar.
Admite las mismas propiedades de entrada que el objeto NavItemData. La propiedad active admite double-binding, pues la propiedad se modifica internamente.
Emite el evento de salida clickEvent al hacer click sobre el item. El evento emitido es del tipo ItemNavEventData.
Emite el evento de salida activeChange al modificarse internamente el valor de la propiedad active. El evento emitido es de tipo boolean.
 Expand
titleEventos de salida
Evento
Tipo
Descripción
clickEvent
NavItemEventData
Se emite al pulsar sobre un ítem.
ItemNavEventData
Evento
Tipo
Descripción
item
NavItemData
Ítem sobre el que se ha pulsado.
event
DOM Event
Datos del evento emitido.
 Expand
titleEjemplos
Image Modified
...
Nav con clase css
 Code Block
languagexml
<desy-nav classes="bg-warning-light" [items]="[{ text: 'Opción 1'}, { text: 'Opción 2' }, { text: 'Opción 3' }]"></desy-nav>
...
Nav con contenido
 Code Block
languagexml
<desy-nav>
    <desy-nav-item>Opción 1</desy-nav-item>
    <desy-nav-item>Opción 2</desy-nav-item>
    <desy-nav-item>Opción 3</desy-nav-item>
</desy-nav>
Image Modified
...
Notification
...
 Code Block
...
code
language
xml
<desy-notification...></desy-notification>
...
 Expand
titleParámetros de entrada/salida
Propiedad
Tipo
Descripción
Obligatorio
isOpen
boolean
Indica si la notificación está abierta. Se puede modificar internamente al pulsar sobre el botón de cierre, por lo que se recomienda el uso de two-way binding.
 
 Expand
titlePropiedades de entrada
Propiedad
Tipo
Descripción
Obligatorio
title
TitleData
Objeto que contiene la información del título.
Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
Si.
description
DescriptionData
Objeto que contiene la información de la descripción.
Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
items
NotificationItemsData[]
Contiene la información relativa a la lista.
content
ContentData
Contenido adicional a incluir tras los items.
Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
 
type
string
Tipos de notificación. Los valores posibles son: success, alert e info. 
El icono predefinido no se aplicará cuando se especifique el atributo icon.
 
icon
IconData
Objeto que contiene la información del icono. Si no se especifica pero se indica la propiedad type, se mostrará un icono predefinido.
Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
 
isDismissible
boolean
Cuando es true el elemento permite cerrar la notificación mediante el icono de cierre.
 
classes
string
Clases CSS separadas por espacio que se aplicarán sobre el <div> contenedor.
 
id
string
Identificador del <div> contenedor.
Si
headingLevel
number
Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior.
Por defecto equivale a un texto de tipo p.
 
 
Objeto NotificationItemsData
Propiedad
Tipo
Descripción
Obligatorio
id
string
Identificador del elemento de la lista.
 
text
string
Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.
Sí, cuando no se especifique html.
html
string
Contenido del texto en formato HTML.
Sí, cuando no se especifique text.
href
string
Ruta externa a la que se redirigirá al pulsar el ítem.
 
target
string
Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
 
routerLink
string|string[]
Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
 
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 admite los siguientes parámetros de accesibilidad. Y además el siguiente:
Parámetro
Atributo de accesibilidad equivalente
tabindex
tabindex
 
 Expand
titleContenido
Se permite proyectar contenido dentro del Notification para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
TitleComponent
 Code Block
<desy-title>...</desy-title>
Permite especificar el título.
Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
DescriptionComponent
 Code Block
<desy-description>...</desy-description>
Permite especificar la descripción.
Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
IconComponent
 Code Block
<desy-icon>...</desy-icon>
Permite especificar el icono. Se ignora el valor del parámetro type. Si se desea mostrar los iconos predefinidos se debe utilizar la propiedad type del componente NotificationComponent.
Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
NotificationItemComponent
 Code Block
<desy-notification-item ...>...</desy-notification-item>
Permite especificar un ítem de la notificación.
Admite los mismos parámetros de entrada que el objeto NotificationItemData.
ContentComponent
 Code Block
<desy-content>...</desy-content>
Permite especificar el contenido adicional tras los items.
Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
 Expand
titleEjemplos
Implementación con contenido
Componente
 Code Block
languagexml
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoNotificationComponent {
  open = true;  
  ...
}

HTML
 Code Block
languagexml
<desy-notification [id]="'notif'" [headingLevel]="3" [(isOpen)]="open" [type]="'alert'" [isDismissible]="true">
  <desy-title [classes]="'uppercase'">Notificación de ejemplo</desy-title>
  <desy-icon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-8 h-8" aria-label="Atención" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </desy-icon>
  <desy-description>Ejemplo de notification con proyección de contenido</desy-description>
  <desy-notification-item [routerLink]="'pagina1'" [fragment]="'pregunta1'">Ir a la pregunta 1</desy-notification-item>
  <desy-notification-item [routerLink]="'pagina1'" [fragment]="'pregunta2'">Ir a la pregunta 2</desy-notification-item>
  <desy-notification-item>Item sin enlace</desy-notification-item>
  <desy-notification-item [href]="'https//google.es'">Salir</desy-notification-item>
  <desy-content>Contenido adicional</desy-content>
</desy-notification>
 
 
Image Modified
Implementación con type=success
Componente
 Code Block
languagexml
@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoNotificationComponent {
  open = true;  
  ...
}

HTML
 Code Block
languagexml
<desy-notification id="type-success" [(isOpen)]="open" [title]="{'text':'El documento se ha cargado correctamente'}" type="success"></desy-notification>
Implementación con items
 Code Block
languagexml
<desy-notification id="with-items" 
    [title]="{'text':'Problemas encontrados'}"
    [items]="[{'text':'Campo Nombre de la empresa está vacío','href':'#empresa'},{'text':'Campo Fecha de inicio de la actividad está vacío','href':'#actividad'},{'text':'El formato de correo electrónico es incorrecto','href':'#email'}]">
</desy-notification>
 
...
 Code Block
languagexml
<desy-skip-link ...></desy-skip-link>
...
 Expand
titlePropiedades de entrada
 
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 componente.
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.
id
string
Identificador del Skip-link
 
Propiedades de accesibilidad
El componente admite los siguientes parámetros de accesibilidad.
 Expand
titleEjemplos
Skip-link con clase css
 Code Block
languagexml
<desy-skip-link text="Saltar al contenido principal" classes="ds-focus" fragment="content"></desy-skip-link>
 
Skip-link con contenido
 Code Block
languagexml
<desy-skip-link classes="ds-focus" fragment="content">Esto es un skip-link <strong>con HTML</strong></desy-skip-link>
 
Accesibilidad
...
En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.
...
Parámetro
...
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