如何将 'md-sidenav' 放在 'md-toolbar' 之上

Question

您如何使用 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

中的方式相同

P.S 有一个类似的问题但是解决方案与angular2 maerial2

不兼容

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

Answer 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);
}

希望对您有所帮助。

如何将 'md-sidenav' 放在 'md-toolbar' 之上

How to place 'md-sidenav' on top of the 'md-toolbar'

angular

angular-material2