Page Comparison

...

Versión

...

Fecha

...

Editor

...

Cambios

...

5.0.0

...

07/12/2021

...

Maria Varshitskaya

...

...

5.1.0

...

27/01/2022

...

Roberto Clemente

...

El componente HeaderDropdownComponent admite un ContentComponent como contenido, que será utilizado en lugar del NavComponent si se indica.

Table of Contents

maxLevel	2
minLevel	2

...

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

...

Code Block

language	xml

<desy-breadcrumbs ...></desy-breadcrumbs>

...

Expand

title	Contenido

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

title	Ejemplos

Image Removed

Image Added

implementación con 2 niveles

Code Block

language	xml

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

Image RemovedImage Added

Implementación con 3 niveles y collapseOnMobile=true

Code Block

language	xml

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

Image RemovedImage Added

Implementación con contenido

Code Block

language	xml

<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

language	xml

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

Permite representar un resumen de errores

...

Expand

title	Propiedades 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

title	Contenido

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

title	Ejemplos

Image Modified

Con contenido

Code Block

language	xml

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

Sin Links

Code Block

language	xml

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

Con y sin Links

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Propiedades de entrada

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

Objeto MetaData

Propiedad	Tipo	Descripción
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
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
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
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

title	Contenido

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.

Expand

title	Ejemplos

Completo con contenido

Code Block

language	xml

<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

Code Block

language	xml

<desy-footer></desy-footer>

Con meta e items

Code Block

language	xml

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

Header

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Header en pantalla grande

Image Removed

Image Added

Header en pantalla mobile

Image RemovedImage Added

Menu lateral desplegado en pantalla mobile

Image Removed

Image Added

implementación con contenido

Code Block

language	xml

<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

language	xml

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

Menubar

...

Code Block

language	xml

<desy-menubar ...>...</desy-menubar>

...

Expand

title	Ejemplos

Menubar con items estáticos

Code Block

language	xml

<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

language	xml

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

...

Code Block

language	xml

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

...

Expand

title	Contenido

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

MenuHorizontalItemComponent

Code Block

language	xml

<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

title	Ejemplos

Image Removed

Image Added

Menú horizontal con estilo de pestañas

Code Block

language	xml

<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

language	xml

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

...

Code Block

language	xml

<desy-menu-vertical...></desy-menu-vertical>

Permite representar un menú en dirección vertical.

...

Expand

title	Propiedades 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
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

title	Contenido

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

title	Ejemplos

Image Modified

Ejemplo con contenido

Code Block

language	xml

<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

language	xml

<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

language	xml

<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

language	xml

<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

language	xml

<desy-nav ...></desy-nav>

Permite representar un menú de navegacionnavegación

...

Expand

title	Propiedades 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

title	Contenido

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

title	Eventos 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

title	Ejemplos

Nav con clase css

Code Block

language	xml

<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

language	xml

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

Notification

...

Code Block

language	xml

<desy-notification...></desy-notification>

...

Expand

title	Ejemplos

Implementación con contenido

Componente

Code Block

language	xml

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoNotificationComponent {
  open = true;  
  ...
}

HTML

Code Block

language	xml

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

Implementación con type=success

Componente

Code Block

language	xml

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoNotificationComponent {
  open = true;  
  ...
}

HTML

Code Block

language	xml

<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

language	xml

<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

language	xml

<desy-skip-link ...></desy-skip-link>

...

Expand

title	Ejemplos

Skip-link con clase css

Image Removed

Image Added

Code Block

language	xml

<desy-skip-link text="Saltar al contenido principal" classes="ds-focus" fragment="content"></desy-skip-link>

Skip-link con contenido

Code Block

language	xml

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

...

Versions Compared

Old Version 1

New Version Current

Key

implementación con 2 niveles

Implementación con 3 niveles y collapseOnMobile=true

Implementación con contenido

Error Summary

Sin Links

Con y sin Links

Footer

Completo con contenido

Básico

Con meta e items

Header

implementación con contenido

implementación con parámetros

Menubar

Menu-horizontal

Menu-vertical

Ejemplo con contenido

Ejemplo con parámetros

Con disabled, target, long text item y divider

Con estilos, sub-items, y html

Nav

NavItemData

Propiedades de accesibilidad

Notification

Implementación con contenido

Componente

HTML

Implementación con type=success

Componente

HTML

Implementación con items

Skip-link con clase css

Skip-link con contenido

Accesibilidad