Material Design Support

Версия для angular: https://material.angular.io/

Install

$ ng add @angular/material

Usage

Добавляем в styles.scss (иначе стили не будут применяться)

@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 

Sidenav

Есть два типа элементов, хз в чем отличие

• mat-drawer-container —

• mat-sidenav-container —

Есть следующие полезные атрибуты:

• mode

  • push — новая область перекрывает старую, но область на заднем плане видно

  • over — новая область перекрывает старую. Область на заднем плане не видно

  • side — новая область не перекрывает старую, можно работать с двумя областями (копировать, вставлять и тп)

• opened — открыта ли область по умолчанию

• position — start | end — слева или справа новая область