如何在angular Dart项目中将angular _ components的材质图标颜色更改为白色



如何在角镖项目中将material-drawermaterial-icon颜色更改为白色,背景为angular _ components。

app_component.html

<material-drawer persistent #drawer="drawer"
[class.custom-width]="customWidth">
<div class="mini-drawer">
<material-list *deferredContent>
<div class="mat-drawer-spacer"></div>
<div>
<material-list-item>
<material-icon icon="inbox"></material-icon>
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>
</material-list-item>
</div>
</material-list>
</div>
</material-drawer>
<div class="material-content">
<header class="material-header shadow">
<div class="material-header-row">
<material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Mobile Layout</span>
<div class="material-spacer"></div>
</div>
</header>
<div class="app-layout">
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
</div>

app_component.css

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/material_tab/mixins';
@import 'package:angular_components/app_layout/mixins';
:host {
}
.custom-width {
@include mat-drawer-width(72px);
@include mat-temporary-drawer-width(72px);
}
.mini-drawer {
height: 100%;
background: $mat-blue;
}
material-list {
background-color: transparent;
color: $mat-white;
}

您可以简单地更改html元素本身的颜色。示例如下:https://dart-lang.github.io/angular_components_example/#material_icon

来源:https://github.com/dart-lang/angular_components_example/blob/134f9b0671ddc1142a445f182637f9e78b2a49f6/example/material_icon_example/lib/material_icon_demo.html#L37

material-icon {
color: white;
}

相关内容

  • 没有找到相关文章

最新更新