mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00

Darya Blavanovich 0d2d08aab3

[ACS-7570] [ADF] Create generic dialog component (#9678 )

2024-05-23 07:35:23 -04:00

2.1 KiB

Raw Blame History

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Dialog component	v6.9.0	Active	2024-05-17

Dialog component

Dialog wrapper styled according to a consistent design system.

Dialog views

Large size and Medium

Looks the same but have different sizes. Max-width for Large dialog is 1075px; Max-width for Medium dialog is 778px;

Alert dialogs

Standard:

With icon:

Dialog with additional buttons

Basic Usage


<ng-template #contentDialogTemplate>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique nihil, natus corrupti asperiores voluptas, incidunt veritatis.
</ng-template>

<ng-template #actionsDialogTemplate>
  <button mat-button>
    Reset
  </button>

  <button mat-button>
    Clean
  </button>
</ng-template>

@ViewChild('contentDialogTemplate') contentDialogTemplate: TemplateRef<any>;
@ViewChild('actionsDialogTemplate') actionsDialogTemplate: TemplateRef<any>;

constructor(private dialog: MatDialog) {}

//...

function openDialog() {
    const data: DialogData = {
        title: 'Dialog title',
        dialogSize: DialogSize.Alert,
        isConfirmButtonDisabled$: of(true),
        contentTemplate: this.contentDialogTemplate,
        actionsTemplate: this.actionsDialogTemplate
    };

    this.dialog.open(DialogComponent, { data });
}

Details

This component lets the user reuse styled dialog wrapper. Use the Angular MatDialog service to open the dialog, as shown in the example, and pass a data object with properties.

2.1 KiB Raw Blame History