2021

Angular 與 MaterialUI

Angular Material官方文件

https://material.angular.io/

Using Material UI via CLI

1
$ ng add @angular/material

自訂主題

https://material.angular.io/guide/theming

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// MATERIAL-UI
@import '~@angular/material/theming';
@include mat-core();


$mat-cyan-qs: (
  50: #e0f7fa,
  100: #b2ebf2,
  200: #80deea,
  300: #4dd0e1,
  400: #26c6da,
  500: #2EC5CE,
  600: #00acc1,
  700: #0097a7,
  800: #00838f,
  900: #006064,
  A100: #84ffff,
  A200: #18ffff,
  A400: #00e5ff,
  A700: #00b8d4,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

// $candy-app-primary: mat-palette($mat-indigo);
$candy-app-primary: mat-palette($mat-cyan-qs);
$candy-app-accent:  mat-palette($mat-indigo);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat-light-theme((
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent,
    warn: $candy-app-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);


使用Mat-Dialog

1
$ ng g c ./dialog/dialog-edit-member
1
2
3
4
5
6
7
8
9
10
11
12
13
14
open_dialog_edit_member(member) {
    this.member_on_editing = JSON.parse(JSON.stringify(member));
    const dialogRef = this.dialog.open(DialogEditMemberComponent, {
        width: "400px",
        height: "300px",
        data: {
            member_on_editing: this.member_on_editing,
            member: member,
        }
    });
    dialogRef.afterClosed().subscribe(result => {
        console.log('The dialog was closed');
    });
}
閱讀全文