如何在AngularDart项目中使用angular_components的AppLayout组件更改material-drawer
的背景颜色。
app_component.html
<material-drawer persistent #drawer="drawer"
[class.custom-width]="customWidth">
<material-list *deferredContent>
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</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.scss
@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(25%);
@include mat-temporary-drawer-width(25%);
}