Dialogs

References

Material Documentation

Example

Usage

Structure

<custom-dialog>
  <div mat-dialog-title>
    Dialog Title
    <button [mat-dialog-close]="true" class="mat-dialog-close">
      <span class="cvtr-icons remove"></span>
    </button>
  </div>
  <mat-dialog-content>
    Dialog Content
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button>Save</button>
  </mat-dialog-actions>
</custom-dialog>

Dialog Content

Use <mat-dialog-content> for dialog content.

Dialog Title

Use <div mat-dialog-title> the add the title for each dialog.

Dialog Actions

Use <mat-dialog-actions> as a container for the dialog ‘Close’ and action buttons (in most cases this will be a ‘Save’ button).
The ‘Close’ button should be placed within <div mat-dialog-title> and should include [mat-dialog-close]="true” to allow the modal to be closed.

Dialog Alignment

Default Behaviour

As standard, dialogs are positioned centrally on screen, no additional code or classes is required to achieve this behaviour.

Top Aligned

There are some instances where dialogs need to be differently positioned, for example when a dialog contains tabs, and each tab has different content which means that the height of the dialog changes when switching tabs.

In this case, dialogs can be aligned to the top of the screen rather than middle by adding the class of mat-dialog-top-align to the custom-dialog container, e.g:

<custom-dialog class="mat-dialog-top-align">

This class addition will change the position of dialogs from middle aligned, e.g:

Top aligned dialog, currently implemented on:

Leads > Profile Dialog
Campaign > Leads > Profile Dialog
Campaign > Publisher > Tracking Information Dialog
Global > Upload Wizard Dialog (e.g. Advertiser > Import)
Publisher > Campaign Information Dialog

Dialog Size

Default Behaviour

As standard, every dialog has a base width of 1024px. This width is automatically applied without having to adjust any HTML classes.

Alternative Sizes

There are 2 different sizes that can be applied to a dialog:

Small size
- Achieved through .mat-dialog-max-width-sml class
Large size
- Achieved through .mat-dialog-max-width-lrg class

The size classes noted above should be applied on the the custom-dialog container, e.g:

<custom-dialog class="mat-dialog-max-width-lrg">

Product Design

Dialogs

Analytics

Related content