angualr material 2 主题头像列表对话框 autocomplete

最新推荐文章于 2024-08-04 19:05:38 发布

power0405hf

最新推荐文章于 2024-08-04 19:05:38 发布

阅读量582

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/power0405hf/article/details/79395301

版权

本文介绍了如何在Angular Material 2中创建和使用自定义主题，包括在header中实现黑夜模式切换的功能。同时，文章讨论了头像列表的实现，使用GridList展示数据，并提供了一个简单的头像列表示例。此外，还提到了对话框的应用，如任务列表的新增和删除操作，以及Autocomplete功能的集成。

摘要由CSDN通过智能技术生成

一，使用自定义主题：
1.在src/下新建theme.scss

theme.scss:
@import '~@angular/material/theming';

@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-pink, A200, A100, A400 );// 默认 亮 暗主题的深浅
$my-app-warn:    mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary,
                               $my-app-accent,
                               $my-app-warn);

@include angular-material-theme($my-app-theme);

$my-dark-primary: mat-palette($mat-blue-grey);
$my-dark-accent:  mat-palette($mat-amber, A200, A100, A400 );