0
次のコードを使用してアプリケーションレイアウトにヘッダーとドロワーを固定しようとしていますが、ヘッダーナビゲーションが応答しないため、ナビゲーションアイテムが画面外に移動します。追加のコードを実行した後の結果は2番目のイメージにあります。angleDartを使用して角度コンポーネントのアプリケーションレイアウトを固定
/* Drawer */
material-drawer .adf-drawer {
position: fixed;
}
/* Header */
material-content header {
position: fixed;
}
ヘッダエラー画像 
引き出しエラー画像
app_layout.html
<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;
}
あなたは追加のCSS定義を使用しましたか？私にとって、ツールバーは固定されていますが、すべてのコンポーネントはツールバーの下にあります。 – Muka
いいえ私は追加のCSSを使用しませんでした。 –