首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Sidenav条在材质角度中不能正确渲染

Sidenav条在材质角度中不能正确渲染
EN

Stack Overflow用户
提问于 2017-10-09 01:43:25
回答 1查看 611关注 0票数 0

Sidenav条在材质角度中不能正确渲染。

菜单并排显示,但我需要一个下面的菜单。

app.component.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav mode="push" class="app-sidenav">
      <mat-toolbar color="primary">

        <span class="toolbar-filler"></span>
        <button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
          <mat-icon aria-label="Menu" class="material-icons">close</mat-icon>
        </button>
      </mat-toolbar>
      <mat-nav-list class="mat-nav-list">
        <a mat-list-item class="sidenav-link"  (click)="sidenav.toggle()">
              <mat-icon mat-list-icon>account_balance</mat-icon>
              <span class="title" mat-line>comp1</span>
              <span mat-line class="secondary">test</span>
        </a>
        <a mat-list-item class="sidenav-link" (click)="sidenav.toggle()">
          <mat-icon mat-list-icon>android</mat-icon>
          <span class="title" mat-line>comp2</span>
          <span mat-line class="secondary">test</span>
        </a>
        <a mat-list-item class="sidenav-link"  (click)="sidenav.toggle()">
          <mat-icon mat-list-icon><i class="material-icons">panorama_wide_angle</i></mat-icon>
          <span class="title" mat-line>fullscreen1</span>
          <span mat-line class="secondary">fullscreen1</span>
        </a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-toolbar id="appToolbar" [ngClass]="{'toolbar-fullscreen': (fullscreen$ | async)}" color="primary">
      <button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
              <mat-icon aria-label="Menu" class="material-icons">menu</mat-icon>
      </button>
      <h1 class="component-title">
        <a class="title-link">{{title}}</a>
      </h1>
      <span class="toolbar-filler"></span>

      <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item>
            <mat-icon>dialpad</mat-icon>
            <span>Redial</span>
          </button>
          <button mat-menu-item disabled>
            <mat-icon>voicemail</mat-icon>
            <span>Check voicemail</span>
          </button>
          <button mat-menu-item>
            <mat-icon>notifications_off</mat-icon>
            <span>Disable alerts</span>
          </button>
        </mat-menu>

    </mat-toolbar>

  </mat-sidenav-container>

截图:

最近angular更新了MD到MAT,这对我的代码有问题吗?因为大多数css不呈现默认设置

EN

回答 1

Stack Overflow用户

发布于 2018-06-09 04:54:34

尝试使用flex layout npm install --save @angular/flex-layout。并将matMenuTriggerFor替换为mat-menu-trigger-for,因为您已经更改了md-> mat。示例代码将如下所示

<mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a href="#" mat-button>example</a>
        <a href="#" mat-button>example</a>
        <a href="#" mat-button>example</a>
      </div>
    </mat-sidenav>
</mat-sidenav-container>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46634127

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档