Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 8 Current »

References


Example

Usage

Structure

<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>

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 mat-dialog-content container div, e.g:

<div mat-dialog-content class="mat-dialog-top-align">

This class addition will change the position of dialogs from middle aligned:

Top aligned dialog, currently implemented on:

  • Leads > Profile Dialog

  • Campaign > Leads > Profile Dialog

  • No labels