inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Darya Blavanovich
2024-06-03 14:34:57 +02:00
committed by GitHub
parent 0ea35b1f12
commit f1167b1bc5
17 changed files with 232 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
docs/content-services/dialogs/dialog.md
View File

@@ -1,86 +0,0 @@
---
Title: Dialog component
Added: v6.9.0
Status: Active
Last reviewed: 2024-05-17
---
# [Dialog component](../../../lib/content-services/src/lib/dialogs/dialog/ "Defined in dialog.component.ts")
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`;
![Large and Medium dialog component](../../docassets/images/adf-dialog.png)
### Alert dialogs
Standard:
![Standard alert dialog component](../../docassets/images/adf-dialog-alert-standart.png)
With icon:
![Alert dialog component with icon](../../docassets/images/adf-dialog-alert-with-icon.png)
### Dialog with additional buttons
![Dialog with additional buttons](../../docassets/images/adf-dialog-with-additional-buttons.png)
## Basic Usage
```html
<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>
```
```ts
@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`](https://material.angular.io/components/dialog/overview)
service to open the dialog, as shown in the example, and pass a `data` object
with properties.
## See also
- [Dialog Data Interface](../interfaces/dialog.interface.md)
- [Dialog Model](../models/dialog.model.md)