Componentes relativos a navegación
Vamos a ver como se usa cada uno de los componentes.
Breadcrumbs
<desy-breadcrumbs ...></desy-breadcrumbs>Proporciona enlaces a cada página anterior por la que se navega y muestra la ubicación actual del usuario en un sitio web.
| | | |
|---|
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 | |
inlineOnMobile | boolean | Cuando es true se aplicará la clase c-breadcrumbs--inline-on-mobile | |
inlineOnDesktop | boolean | Cuando es true se aplicará la clase c-breadcrumbs--inline-on-desktop | |
hasBackButton | boolean | Cuando es true el breadcrumbs comenzará con un botón de retroceso | |
Objeto BreadcrumbsData
| | | |
|---|
id | string | Identificador del elemento de la lista. | |
routerLink | string | Ruta interna relativa al proyecto | |
text | string | Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html. | Si, cuando no se especifica html. |
html | string | Contenido del texto en formato HTML. | Si, cuando no se especifica text. |
Propiedades de accesibilidad
El componente y cada DreadcrumbsData admiten los siguientes parámetros de accesibilidad.
Se permite proyectar contenido dentro de los elementos de breadcrumbs para facilitar su uso. Para ello se facilita el siguiente sub-componente:
BreadcrumbsItemComponent
<desy-breadcrumbs-item ...>...</desy-breadcrumbs-item>Permite utilizar el contenido especificado como item de la lista de navegación a mostrar.
Admite las mismas propiedades de entrada que el objeto BreadcrumbsData.
implementación con 2 niveles
<desy-breadcrumbs [classes]="classes" id="implementacion2niveles"
[items]="[{'text':'Section','routerLink':'/collapsible'},{'text':'Sub-section','routerLink':'/fieldset'}]">
</desy-breadcrumbs>
Implementación con 3 niveles y collapseOnMobile=true
Implementación con contenido
Error Summary
Permite representar un resumen de errores
| | | |
|---|
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
| | | |
|---|
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 Angular ). Es necesario activar la propiedad anchorScrolling de la configuración de nuestro proyecto. | |
Propiedades de accesibilidad
El componente y cada ErrorSummaryData admiten los siguientes parámetros de accesibilidad.
Se permite proyectar contenido dentro del ErrorSummary para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:
TitleComponent
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
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
Permite especificar un item de error.
Admite los mismos parámetros de entrada que el objeto ErrorSummaryData.
Footer
Permite representar un pie de página
Header
Permite representar una cabecera.
Header Mini
Permite representar una cabecera mini.
Header Advanced
Permite representar una cabecera avanzada.
Links-list
Permite representar una lista de enlaces.
MenuNavigation
Permite representar un menú de navegación tanto con items simples como items con un listado de items desplegable.
Menubar
Permite representar un menú horizontal tanto con items simples como items con un listado de items desplegable.
Menu-horizontal
Permite representar un menú en dirección horizontal.
Menu-vertical
Permite representar un menú en dirección vertical.
Nav
Permite representar un menú de navegación
Notification
Permite representar un mensaje de notificación
Skip-link
Permite representar un enlace de saltar contenido.
Accesibilidad
En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.
| Atributo de accesibilidad equivalente |
|---|
| 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 |
