1 Accordion
2 Alert
3 Collapsible
4 Description-list
5 Details
6 Item
7 Media-object
8 Pagination
9 Spinner
10 Status
11 Status-item
12 Tabs
13 Accesibilidad
14 AlertService

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
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
id	string	Identificador del elemento
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.

Implementación básica

<desy-accordion [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

Con heading y showControls

<desy-accordion [heading]="{text: 'Accordion example'}" [showControl]="true" [items]="[{headerText: 'Accordion Item 1', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'},{headerText: 'Accordion Item 2', text: 'Example'}]" [idPrefix]="'accordion'"></desy-accordion>

Alert

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

Propiedad	Evento	Tipo	Descripción	Obligatorio

Propiedad	Evento	Tipo	Descripción	Obligatorio
active	activeChange	boolean	Indica si el alert está activo. Se puede modificar internamente, por lo que se recomienda el uso de two-way binding.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador.	Sí.
caller	TemplateRef <any>	Template para mostrar como contenido del elemento.	Sí, al crearse desde template.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
focusFirst	boolean	Permite focalizar sobre el primer elemento dentro del alert al abrirse

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Componente

HTML

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

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

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

Área de empleados públicos e Integradores

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

Componentes relativos a vistas

Accordion

Implementación básica

Con heading y showControls

Alert

Componente

HTML

Collapsible

Description-list

Details

Item

Media-object

Pagination

Spinner

Status

Status-item

Tabs

Accesibilidad

Componentes relativos a vistas

AlertService

openAlert

closeAlert

onCloseAlert

Related pages