desy-angular v10.0 - Manual de integración DesyViewsModule

Owned by Servicios Digitales de Aragón
Last updated: 23 Jan 2024
32 min read

Componentes relativos a vistas

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

 

Accordion

<desy-accordion ...></desy-accordion>

Genera una lista de desplegables.

 

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

items

AccordionItemData[]

Contiene la información relativa a la lista.

Si

heading

AccordionHeaderData

Contiene la información del header

 

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

 

allowToggle

boolean

Permite cerrar cada elemento de forma individual

 

allowMultiple

boolean

Permite mantener desplegado los diferentes elementos individualmente

 

showControl

boolean

Permite mostrar un botón para Mostrar/ocultar todos los elementos del accordion

 

id-prefix

string

Prefijo de los identificadores del listado de it

Si

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el container del accordion

 

 

Objeto AccordionItemData

Propiedad

Tipo

Descripción

Obligatorio

Propiedad

Tipo

Descripción

Obligatorio

headerText

string

Texto de la cabecera del elemento. No se aplicará cuando se especifique la propiedad headerHtml.

Si, cuando no se especifica headerHtml.

headerHtml

string

Html de la cabecera del elemento.

Si, cuando no se especifica headerText.

text

string

Texto del panel del item. Oculto por defecto. No se aplicará cuando se especifique la propiedad html.

Si, cuando no se especifica html.

html

string

Html del panel del item. Oculto por defecto.

Si, cuando no se especifica text.

open

boolean

Variable que marca si debe estar expandido el item

 

id

string

Identificador del elemento de la lista.

 

classes

string

Clases CSS separadas por espacio que se aplicarán sobre el elemento de la lista.

 

 

Objeto AccordionHeaderData

Propiedad

Tipo

Descripción

Obligatorio

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.

 

 

Propiedades de accesibilidad

El componente, cada AccordionItemData y AccordionHeaderData admiten los siguientes parámetros de accesibilidad.

 

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

AccordionHeaderComponent

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

Permite especificar la cabecera.

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

AccordionItemComponent

<desy-accordion-item ...>...</desy-accordion-item>

Permite especificar un item del listado.

Admite los mismos parámetros de entrada que el objeto AccordionItemData. El parámetro open admite double-binding.

Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Además, se puede modificar el botón de Mostrar/Ocultar incluyendo los componentes AccordionItemShowButtonComponent y AccordionItemHideButtonComponent respectivamente, que únicamente admiten como contenido el HTML a mostrar.

AccordionItemShowButtonComponent

AccordionItemHideButtonComponent

 

Implementación básica

 

Con heading y showControls

 

 

AccordionHistory

Genera una lista de desplegables que, además, tienen un estado temporal.

 

El componente AccordionHistory tiene los mismos parámetros de entrada que el componente Accordion.

Propiedades de accesibilidad

El componente, cada AccordionItemData y AccordionHeaderData admiten los siguientes parámetros de accesibilidad.

 

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

AccordionHeaderComponent

Permite especificar la cabecera.

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

AccordionHistoryItemComponent

Permite especificar un item del listado.

Admite los mismos parámetros de entrada que el componente AccordionItemComponent. Además, admite los siguientes parámetros adicionales:

Propiedad

Tipo

Descripción

Propiedad

Tipo

Descripción

status

string

Permite reflejar el estado temporal del item. Los posibles valores son:

  • current → Estado actual

  • pending → Estado pendiente

  • muted → Estado desactivado

  • currentmuted → Estado desactivado y actual

  • Otro/ninguno/por defecto → Estado anterior al actual

disabled

boolean

Permite indicar que el item está deshabilitado.

Cada item está compuesto por una cabecera y un contenido, que se podrán representar mediante los componentes AccordionHeaderComponent y ContentComponent, respectivamente. El componente ContentComponent es común entre los módulos, por lo que se encuentra en el módulo DesyCommonsModule.

Además, se puede modificar el botón de Mostrar/Ocultar incluyendo los componentes AccordionHistoryItemShowButtonComponent y AccordionHistoryItemHideButtonComponent respectivamente, que únicamente admiten como contenido el HTML a mostrar.

 

Alert

Permite abrir una notificación. Se recomienda su creación dinámica desde el servicio AlertService.

 

 

Card

Permite introducir una card

 

 

Collapsible

Permite la creación de una sección plegable

 

Description-list

Genera una lista de descripción (<dl>). El elemento incluye una lista de grupos de términos (especificados mediante el elemento <dt>) y descripciones (proporcionadas por elementos <dd>)

 

Details

Permite ver detalles adicionales que el usuario puede abrir y cerrar.

 

Item

Permite introducir un item

 

 

 

Media-object

Genera una etiqueta div que contiene a su vez otro div con una figura en formato Html y un div con texto .

 

 

Pagination

Permite visualizar paginas en listados e interactuar con ellas

 

 

Spinner

Permite representar un spinner durante procesos de carga.

 

Status

Permite representar el estado de un elemento o de una operación.

 

Status-item

Permite introducir un item con status

 

 

Tabs

Permite introducir pestañas para organizar el contenido

 

Tooltip

Permite mostrar información ampliada colocando el ratón encima de un elemento

 

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

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

ariaModal

aria-modal

tabindex

tabindex


Servicios relativos a vistas

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

 

AlertService

Servicio que permite abrir y cerrar alerts de forma dinámica, es decir, sin tener que especificar los componentes en el HTML.

Contiene los siguientes métodos:

openAlert

Permite abrir un alert en una posición específica del html.

closeAlert

Permite cerrar un alert.

onCloseAlert

Permite gestionar el evento de cierre de un alert.