desy-angular v11.1 - Manual de integración DesyModalsModule
- Servicios Digitales de Aragón
Componentes relativos a modales
Vamos a ver como se usa cada uno de los componentes.
Dialog
<desy-dialog...></desy-dialog>Permite representar un diálogo modal definido desde template/html. Para crear un dialog dinámicamente ver el servicio DialogService.
Ejemplo utilizando un componente Modal como caller y un botón para abrir el dialog
Componente
@Component({
selector: '...',
templateUrl: '...',
...
})
export class DemoDialogComponent {
...
active = false;
openDialog(): void {
this.active = true;
}
closeDialog(): void {
this.active = false;
}
...
}HTML
<desy-button text="Abrir dialog" (clickEvent)="openDialog()" [id]="'dialog-btn'"></desy-button>
<desy-dialog [(active)]="active" [id]="'dialog'" [caller]="modal" focusOnClose="dialog-btn" [dismissOnBackdrop]="true">
<ng-template #modal>
<desy-modal [id]="'caller-example'"
classes="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl"
[isDismissible]="true"
[title]="{text:'Editar servicio publicado'}"
[description]="{html:'<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>'}"
[itemsPrimary]="[{text:'Editar servicio','classes':'c-button--primary'}]"
(closeModal)="closeDialog()">
</desy-modal>
</ng-template>
</desy-dialog>
Modal
Permite representar el contenido de una ventana modal.
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 |
Servicios relativos a modales
Vamos a ver como se usa cada uno de los servicios.
DialogService
Servicio que permite abrir y cerrar diálogos de forma dinámica, es decir, sin tener que especificar los componentes en el HTML. Contiene los siguientes métodos
openDialog
Permite abrir un dialog.
closeDialog
Permite cerrar un dialog.
onCloseDialog
Permite gestionar el evento de cierre de un dialog.