Componentes relativos a navegación

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

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

Proporciona enlaces a cada página anterior por la que se navega y muestra la ubicación actual del usuario en un sitio web.

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.

Contenido

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

BreadcrumbsItemComponent

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

Permite utilizar el contenido especificado como item de la lista de navegación a mostrar.

Admite las mismas propiedades de entrada que el objeto BreadcrumbsData.

Ejemplos

implementación con 2 niveles

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

Implementación con 3 niveles y collapseOnMobile=true

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

Implementación con contenido

<desy-breadcrumbs [classes]="classes" [id]="implementacionContendio" [collapseOnMobile]="true" [hasBackButton]="true">
  <desy-breadcrumbs-item [routerLink]="'/'">Home</desy-breadcrumbs-item>
  <desy-breadcrumbs-item>Section</desy-breadcrumbs-item>
  <desy-breadcrumbs-item [routerLink]="'/section/sub-section'">Sub-section</desy-breadcrumbs-item>
  <desy-breadcrumbs-item [routerLink]="'/collapsible'">Sub Sub-section</desy-breadcrumbs-item>
</desy-breadcrumbs>

Error Summary

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

Permite representar un resumen de errores

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.

Contenido

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

TitleComponent

<desy-title>...</desy-title>

Permite especificar el título sin utilizar los parámetros de entrada.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

DescriptionComponent

<desy-description>...</desy-description>

Permite especificar la descripción sin utilizar los parámetros de entrada.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

ErrorSummaryItemComponent

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

Permite especificar un item de error.

Admite los mismos parámetros de entrada que el objeto ErrorSummaryData.

Ejemplos

Con contenido

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

Sin Links

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

Con y sin Links

<desy-error-summary [classes]="'p-base border-2 border-alert-base'" [titleText]="'There is a problem'" [id]="'error-summary-title'" 
    [errorList]="[{'text':'Invalid username or password'},{'text':'Agree to the terms of service to log in','fragment':'example-error-1'}]">
</desy-error-summary>

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

Permite representar un pie de página

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	Obligatorio
text	string	Contenido del texto en formato texto plano.
href	string	Ruta externa a la que se redirigirá al pulsar el item.

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	Obligatorio
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.
href	string	Ruta externa a la que se redirigirá al pulsar el item.

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.

Ejemplos

Básico

<desy-footer></desy-footer>

Con meta e items

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

Header

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

Permite representar una cabecera.

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

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.

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.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento que contiene el Dropdown.
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.

Ejemplos

Header en pantalla grande

Header en pantalla mobile

Menu lateral desplegado en pantalla mobile

implementación

<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, labelledId: 'header-offcanvas-menu-title' }">
  <ng-template #headerOffCanvasMenu>
    <ul>
      <li>
        <h3 class="p-base text-base font-bold" id="header-offcanvas-menu-title">Componentes</h3>
        <desy-nav 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 classes="bg-warning-light" [items]="[{ text: 'Desy-frontend', href: 'http://desy.jesuscuadra.es/', target: '_blank' }]"></desy-nav>
      </li>
    </ul>
  </ng-template>
</desy-header>

Menubar

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

Permite representar un menú horizontal tanto con items simples como items con un listado de items desplegable.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del menú.
idPrefix	string	Prefijo para el id de los items.
items	MenubarItem[]	Elementos del menú. Admite double-binding para admitir modificaciones sobre los items (como activar/desactivar items de tipo checkbox).	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
labelText	string	Título o etiqueta. Puede especificarse utilizando una de las siguientes opciones: anidando el componente desy-menubar-label (ver apartado Proyección de contenido) labelText: texto de título. labelData: objeto que contiene toda la información de un componente Label. labelRef: tag de un ng-template que contenga un componente Label. Si se especifican varias, se aplicará la opción que admite mayor personalización: desy-menubar-label → labelRef → labelData → labelText.
labelData	LabelData
labelRef	TemplateRef <LabelComponent>

MenubarItem

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del item.	Sí
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifica text.
active	boolean	Indica si el item se muestra seleccionado.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el item.
disabled	boolean	Indica si el item está deshabilitado.
href	string	Ruta externa a la que se redirigirá al pulsar el item. No se aplicará cuando se especifique la propiedad routerLink o se aporte el elemento sub y/o subitems.
target	string	Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink). No se aplicará cuando se aporte el elemento sub y/o subitems.
routerLinkActiveClasses	string
fragment	string	Propiedad de routerlink para especificar el anchor. Por defecto content. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.
title	string	Propiedad title a incorporar en el elemento.
ariaLabel	string	En caso de tener subMenu, propiedad ariaLabel a incorporar en el elemento ul.
sub	MenubarItemSub	Datos del subMenu.

El item admite los siguientes parámetros de accesibilidad

MenubarItemSub

Propiedad	Tipo	Descripción	Obligatorio
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
items	MenubarItemSubItem[]	Items del submenu

El itemSub admite los siguientes parámetros de accesibilidad

MenubarItemSubItem

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifica text.
role	string	Tipo de item. Se contemplan los siguientes: menuitem: item normal none: item no interactuable group: grupo de items menuitemcheckbox: checkbox individual separator: elemento de separación	Sí
checked	boolean	Si es role=menuitemcheckbox, indica si está seleccionado
items	MenubarItemSubItemSubItem[]	Sub-items cuando se especifique role=group.

MenubarItemSubItemSubItem

Propiedad	Tipo	Descripción	Obligatorio
role	string	Tipo de item. Se contemplan los siguientes: menuitem: item normal none: item no interactuable group: grupo de items menuitemcheckbox: item tipo checkbox menuitemradio: item tipo radio	Sí
items	MenubarItemSubItem[]	Items del submenu
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifica text.
checked	boolean	Si es role=menuitemcheckbox o role=menuitemradio, indica si está seleccionado

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad

Eventos de salida

Evento	Tipo	Descripción
itemsChange	MenubarItem[]	Se emite cuando se modifican propiedades de los items.
activeItemChange	MenubarItem	Se emite el item seleccionado.
activeSubItemChange	MenubarItemSubItem o MenubarItemSubItemSubItem	Se emite el sub-item seleccionado.

Contenido

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

MenubarLabelComponent

<desy-menubar-label classes="...">Texto de label</desy-menubar-label>

Permite especificar el label sin utilizar los parámetros de entrada. Admite el parámetro classes.

MenubarItemComponent

<desy-menubar-item ... (selected)="...">Item 1 ...</desy-menubar-item>

Permite especificar un item del listado.

Admite los mismos parámetros de entrada que el objeto MenubarItem.

Emite el evento de salida selected al seleccionarse.

MenubarSubItemComponent

<desy-menubar-subitem ... (selected)="..." (checkedChange)="...">SubItem 1 ...</desy-menubar-subitem>

Permite especificar un subitem dentro de un elemento desy-menubar-item.

Admite los mismos parámetros de entrada que el objeto MenubarItemSubItem.

Emite el evento de salida selected al seleccionarse.

En el caso de role=menuitemcheckbox, se emite el valor de checked en el evento checkedChange al modificarse.

MenubarSubSubItemComponent

<desy-menubar-subsubitem ... (selected)="..." (checkedChange)="...">SubSubItem 1 ...</desy-menubar-subsubitem>

Permite especificar un subitem dentro de un elemento desy-menubar-subitem, en el caso de que este tenga role=group.

Admite los mismos parámetros de entrada que el objeto MenubarItemSubItemSubItem.

Emite el evento de salida selected al seleccionarse.

En el caso de role=menuitemcheckbox o role=menuitemradio, se emite el valor de checked en el evento checkedChange al modificarse.

Ejemplos

Menubar con items estáticos

<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

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

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

Permite representar un menú en dirección horizontal.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del menú.
idPrefix	string	Prefijo para el id de los items. Por defecto ‘menu-item’.
items	MenuHorizontalItemData[]	Elementos del menú.	Sí
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

MenuHorizontalItemData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del item.
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifica text.
active	boolean	Indica si el item está actualmente seleccionado.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
disabled	boolean	Indica si el item está deshabilitado.
href	string	Ruta externa a la que se redirigirá al pulsar el item. No se aplicará cuando se especifique la propiedad routerLink.	Sí, cuando no se especifica routerLink.
target	string	Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).	Sí, cuando no se especifica href.
fragment	string	Propiedad de routerlink para especificar el anchor. Por defecto content. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad

Eventos de salida

Evento	Tipo	Descripción
clickEvent	MenuHorizontalItemEventData	Se emite al pulsar sobre un ítem.

MenuHorizontalItemEventData

Evento	Tipo	Descripción
item	MenuHorizontalItemData	Ítem sobre el que se ha pulsado.
event	DOM Event	Datos del evento emitido.

Contenido

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

MenuHorizontalItemComponent

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

Ejemplos

Menú horizontal con estilo de pestañas

<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

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

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

Permite representar un menú en dirección vertical.

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.

Ejemplos

Básico

<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

<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

<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

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

Permite representar un menú de navegacion

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

Contenido

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

NavItemComponent

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

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.

Ejemplos

Nav con clase css

<desy-nav classes="bg-warning-light" [items]="[{ text: 'Opción 1'}, { text: 'Opción 2' }, { text: 'Opción 3' }]"></desy-nav>

Nav con contenido

<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

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

Permite representar un mensaje de notificación

Parámetros de entrada/salida

Propiedad	Tipo	Descripción	Obligatorio
isOpen	boolean	Indica si la notificación está abierta. Se puede modificar internamente al pulsar sobre el botón de cierre, por lo que se recomienda el uso de two-way binding.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
title	TitleData	Objeto que contiene la información del título. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.	Si.
description	DescriptionData	Objeto que contiene la información de la descripción. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
items	NotificationItemsData[]	Contiene la información relativa a la lista.
content	ContentData	Contenido adicional a incluir tras los items. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
type	string	Tipos de notificación. Los valores posibles son: success, alert e info. El icono predefinido no se aplicará cuando se especifique el atributo icon.
icon	IconData	Objeto que contiene la información del icono. Si no se especifica pero se indica la propiedad type, se mostrará un icono predefinido. Este objeto es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.
isDismissible	boolean	Cuando es true el elemento permite cerrar la notificación mediante el icono de cierre.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el <div> contenedor.
id	string	Identificador del <div> contenedor.	Si
headingLevel	number	Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior. Por defecto equivale a un texto de tipo p.

Objeto NotificationItemsData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del elemento de la lista.
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Sí, cuando no se especifique html.
html	string	Contenido del texto en formato HTML.	Sí, cuando no se especifique text.
href	string	Ruta externa a la que se redirigirá al pulsar el ítem.
target	string	Especifica dónde abrir el enlace (ver https://www.w3schools.com/tags/att_a_target.asp).
routerLink	string\|string[]	Ruta interna relativa al proyecto (ver https://angular.io/api/router/RouterLink).
fragment	string	Propiedad de routerlink para especificar el anchor. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Y además el siguiente:

Parámetro	Atributo de accesibilidad equivalente
tabindex	tabindex

Contenido

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

TitleComponent

<desy-title>...</desy-title>

Permite especificar el título.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

DescriptionComponent

<desy-description>...</desy-description>

Permite especificar la descripción.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

IconComponent

<desy-icon>...</desy-icon>

Permite especificar el icono. Se ignora el valor del parámetro type. Si se desea mostrar los iconos predefinidos se debe utilizar la propiedad type del componente NotificationComponent.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

NotificationItemComponent

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

Permite especificar un ítem de la notificación.

Admite los mismos parámetros de entrada que el objeto NotificationItemData.

ContentComponent

<desy-content>...</desy-content>

Permite especificar el contenido adicional tras los items.

Este componente es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Ejemplos

Implementación con contenido

Componente

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

HTML

<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

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

HTML

<desy-notification id="type-success" [(isOpen)]="open" [title]="{'text':'El documento se ha cargado correctamente'}" type="success"></desy-notification>

Implementación con items

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

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

Permite representar un enlace de saltar contenido.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
fragment	string	Propiedad de routerlink para especificar el anchor. Por defecto content. (ver https://angular.io/api/router/RouterLink). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto.
id	string	Identificador del Skip-link

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Skip-link con clase css

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

Skip-link con contenido

<desy-skip-link classes="ds-focus" fragment="content">Esto es un skip-link <strong>con HTML</strong></desy-skip-link>

Accesibilidad

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
tabindex	tabindex

Componentes relativos a navegación

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

Básico

Con meta e items

Header

implementación

Menubar

MenubarItem

MenubarItemSub

MenubarItemSubItem

MenubarItemSubItemSubItem

Propiedades de accesibilidad

Menu-horizontal

MenuHorizontalItemData

Propiedades de accesibilidad

Menu-vertical

Básico

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

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

Componentes relativos a navegación

Breadcrumbs

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

Básico

Con meta e items

Header

implementación

Menubar

MenubarItem

MenubarItemSub

MenubarItemSubItem

MenubarItemSubItemSubItem

Propiedades de accesibilidad

Menu-horizontal

MenuHorizontalItemData

Propiedades de accesibilidad

Menu-vertical

Básico

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

Skip-link con clase css

Skip-link con contenido

Accesibilidad