Angular Material2 工具栏响应式改变颜色

Question

是否可以根据需要更改 md-toolbar 颜色？

我用 Flex-Layout 包 Responsive 做了类似的事情 API:

md-toolbar color.xs="primary"

但没用。

我想我可以通过观察 ObservableMedia 然后在代码中设置工具栏的颜色来更改它，但我想知道是否有更简单的方法。

谢谢

更新

我已经打开了一个问题，作为一个功能请求，基本上按照我上面所说的去做。他们说 no plans.

Answer 1

当然可以，但是你需要经历一些 css :

@import '~@angular/material/theming';
@import 'src/assets/css/theming.scss';

.primary { background: mat-color($primary); }
.accent { background: mat-color($accent); }
.warn { background: mat-color($warn); }

（假设您的主题文件放置正确并且您使用了正确的变量名称）

现在在您的工具栏中：

<md-toolbar ngClass.xs="primary" ngClass.md="accent"></md-toolbar>

Angular Material2 工具栏响应式改变颜色

Angular Material2 Toolbar change color responsively

angular-material2

angular-flex-layout

angular