【发布时间】：2018-04-05 17:13:11
【问题描述】：
我正在尝试使用以下代码修复应用程序布局中的标题和抽屉，但标题导航没有响应，导航项移到屏幕右侧。运行附加代码后，结果在第二张图像中。
/* Drawer */
material-drawer .adf-drawer {
position: fixed;
}
/* Header */
material-content header {
position: fixed;
}
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
<material-list *deferredContent class="adf-drawer">
<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>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title visible-desktop">AngularDart + Firebase</span>
<span class="material-header-title visible-mobile">AD + FB</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<a href="#AppLayout">Link 2</a>
</nav>
<nav class="material-navigation">
<material-button icon>
<material-icon icon="more_vert"></material-icon>
</material-button>
</nav>
<login-logout></login-logout>
</div>
</header>
<div>
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 class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_layout.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:yns_app/src/component/login-logout/login_logout_component.dart';
@Component(
selector: 'app-layout',
directives: const [
materialDirectives,
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
LoginLogoutComponent,
],
templateUrl: 'app_layout.html',
styleUrls: const [
'app_layout.css',
'package:angular_components/app_layout/layout.scss.css',
])
class AppLayoutComponent {
bool end = false;
}
app_layout.scss
@import 'package:angular_components/css/material/material';
:host {
display: block;
overflow: hidden;
}
.controls {
align-items: flex-start;
display: flex;
flex-direction: column;
}
a:link, a:visited, a:active, a:hover {
color: $mat-white;
text-decoration: none;
}
/* Drawer */
material-drawer .adf-drawer {
position: fixed;
}
/* Header */
material-content header {
position: fixed;
}
【问题讨论】：
标签： dart angular-dart angular-components dart-html dart-webui