Question

我正在尝试使用以下代码修复应用布局中的标题和抽屉，但标题导航没有响应，导航项目向右移出屏幕。由于结果是在运行附加代码后的第二张图像中。

/* 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;
}

Answer 1

app_component.html

<material-content>
<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>
    <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_component.css

material-content material-drawer {
    position: fixed;
}

material-content header {
    position: fixed;
}

应用程序布局使用angularDart固定角度组件的标题

1 个答案: