Question

您如何使用material2将md-toolbar置于与https://inbox.google.com/u/0/?pli=1相似的md-sidenav之上？

以下是将md-sidenav https://github.com/jelbourn/material2-app md-sidenav与角度材质2一起使用的示例，但它不符合我的要求。

您如何以md-toolbar与https://inbox.google.com/u/0/?pli=1中的md-sidenav相同的方式修改此示例的方式provide('myFactory', useFactory: (dep1, dep2) => () => new Foo(dep1, dep2), deps: [Dep1, Dep2])

P.S 有一个类似的问题md-sidenav toggle() is on top of the md-toolbar，但解决方案与angular2 maerial2

不兼容

Answer 1

如果我理解了这个问题，这对我有用。只需将工具栏放在单独的元素中（不在sidenav容器内），也可以从md-sidenav-container中删除fullscreen指令

＆＃13;

<md-toolbar color="primary">
  <button md-icon-button (click)="nav.open()">
    <md-icon class="md-24">menu</md-icon>
  </button>
</md-toolbar>

<md-sidenav-container>

  <md-sidenav #nav>
    <md-nav-list>
      <md-list-item>
        <a href="#"></a>
      </md-list-item>
      <md-list-item>
        <a href="#"></a>
      </md-list-item>
    </md-nav-list>
  </md-sidenav>

  <div>
    <div #root="$implicit">
      <router-outlet></router-outlet>
    </div>
  </div>
</md-sidenav-container>

＆＃13;

Answer 2

您需要做的就是在circle.setRadius(); double radius = circle.getRadius();内移动工具栏。确保md-sidenav-container和toolbar位于router-outlet div的flex方向内。需要一些CSS来调整高度，填充等，并在div column enclosing中设置垂直溢出。这将确保在您滚动内容时始终可见router-outlet。

以下对我有用。（注意：我使用了@ angular / flex-layout，这使得flex布局更容易。如果您希望可以将其更改为常规flex css样式）

toolbar

此要求的样式（<div> <md-sidenav-container fxLayout="row" class="app-inner"> <md-sidenav #nav class="app-sidebar-panel" mode="over" [opened]="false"> <md-nav-list> <md-list-item> <a href="#">Item-1</a> </md-list-item> <md-list-item> <a href="#">Item-2</a> </md-list-item> <md-list-item> <a href="#">Item-3</a> </md-list-item> </md-nav-list> </md-sidenav> <div fxLayout="column" fxLayoutAlign="start stretch"> <md-toolbar class="app-toolbar" color="primary"> <button md-icon-button (click)="nav.open()"> <md-icon>menu</md-icon> </button> </md-toolbar> <div class="app-route-content"> <router-outlet></router-outlet> </div> </div> </md-sidenav-container> </div>）：

SASS

希望这会对你有所帮助。

如何将'md-sidenav'放在'md-toolbar'的顶部

2 个答案: