desy-angular v2.0 - Manual de integración DesyViewsModule
- Servicios Digitales de Aragón
- 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.
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.
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 |
|---|---|
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.