Page Comparison

Table of Contents

maxLevel	2
minLevel	2

...

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

...

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

...

Expand

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

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

implementación con 2 niveles

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

Implementación con 3 niveles y collapseOnMobile=true

Code Block

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

Implementación con contenido

Code Block

<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
<desy-error-summary ...>...</desy-error-summary>

...

Expand

title	Ejemplos

Con contenido

Code Block

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

Sin Links

Code Block

<desy-error-summary [classes]="'p-base border-2 border-alert-base'" [titleText]="'There is a problem'" [id]="'error-summary-title'"
    [errorList]="[{'text':'Invalid username or password'}]">
</desy-error-summary>

Con y sin Links

Code Block

<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
<desy-footer ...></desy-footer>

...

Expand

title	Ejemplos

Completo con contenido

Code Block

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

Básico

Code Block
<desy-footer></desy-footer>

Con meta e items

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

Header

...

Code Block
<desy-header ...></desy-header>

...

Expand

title	Propiedades de entrada

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

title	Contenido

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

title	Ejemplos

Header en pantalla grande

Header en pantalla mobile

Menu lateral desplegado en pantalla mobile

implementación con contenido

Code Block

<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

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

MenuNavigation

...

Code Block
<desy-menu-navigation ...>...</desy-menu-navigation>

...

Expand

title	Ejemplos

MenuNavigation con items estáticos

Code Block

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

Menubar con items como contenido

Code Block

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

Menubar

...

Code Block
<desy-menubar ...>...</desy-menubar>

...

Expand

title	Ejemplos

Menubar con items estáticos

Code Block

<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

<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
<desy-menu-horizontal ...></desy-menu-horizontal>

...

Expand

title	Ejemplos

Menú horizontal con estilo de pestañas

Code Block

<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

<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
<desy-menu-vertical...></desy-menu-vertical>

...

Expand

title	Ejemplos

Ejemplo con contenido

Code Block

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

Ejemplo con parámetros

Code Block

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

Con disabled, target, long text item y divider

Code Block

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

Con estilos, sub-items, y html

Code Block

<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
<desy-nav ...></desy-nav>

...

Expand

title	Ejemplos

Nav con clase css

Code Block
<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
<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
<desy-notification...></desy-notification>

...

Expand

title	Ejemplos

Implementación con contenido

Componente

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

HTML

Code Block

<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
@Component({ selector: '...', templateUrl: '...', ... }) export class DemoNotificationComponent { open = true; ... }

HTML

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

<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
<desy-skip-link ...></desy-skip-link>

...

Expand

title	Ejemplos

Skip-link con clase css

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

Skip-link con contenido

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

MenuNavigation

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

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