如何将“md-sidenav”放在“md-toolbar”的顶部答案

【问题标题】：How to place 'md-sidenav' on top of the 'md-toolbar'如何将“md-sidenav”放在“md-toolbar”的顶部
【发布时间】：2017-06-05 08:30:24
【问题描述】：

您如何使用 material2 将 md-toolbar 放在 md-sidenav类似 https://inbox.google.com/u/0/?pli=1 之上？

这是一个将 md-sidenav https://github.com/jelbourn/material2-app md-sidenav 与 angular material2 一起使用的示例，但它的行为不是我想要的。

您将如何修改此示例，使md-toolbar 保持在md-sidenav 之上，与https://inbox.google.com/u/0/?pli=1 中的方式相同

附言有一个类似的问题md-sidenav toggle() is on top of the md-toolbar 但解决方案与 angular2 maerial2 不兼容

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

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

以下内容对我很有效。（注意：我使用过@angular/flex-layout，它使flex布局更容易。如果你愿意，可以将其更改为常规的flex css样式）

<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)：

$app-toolbar-height: 48px !default;
$app-route-content-padding: 0.5rem !default;
$app-sidebar-width: 15.65rem !default;

// Important: This is required to override the
// default padding of md-sidenav-content.

:host /deep/ {
    .md-sidenav-content {
        padding: 0px;
    }
}

.app-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 100vh;
}

md-sidenav.app-sidebar-panel {
    overflow-x: hidden;
    width: $app-sidebar-width;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.3) !important;
}

md-toolbar {
    min-height: $app-toolbar-height !important;
    md-toolbar-row {
        min-height: $app-toolbar-height !important;
        height: $app-toolbar-height !important;
    }
    &.main-header {
        position: relative;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
        z-index: 1;
    }
}

.app-toolbar {
    position: relative;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.app-route-content {
    overflow-y: scroll;
    padding: #{$app-route-content-padding} !important;
    height: calc(100vh - #{$app-toolbar-height} - #{$app-route-content-padding} * 2);
}

希望对你有所帮助。

【讨论】：