如何在使用md-sidenav和md-toolbar的同时将右侧空置space用于新组件？

Question

我在顶部添加了一个 md-toolbar，在它的左边我添加了一个按钮，它将打开一个 md-sidenav（从左到右）

但是正因为如此，当我在整个组件下方添加另一个组件时，它不会使用空白的右侧区域。相反，它占用了整个 100% 的高度，因此剩余的组件显示在整个页面下方。

我尝试使用 CSS 文件，但是当我尝试将宽度减小到仅 20% 时，结果一团糟。我想使用这个精确的设计，但也想为下一个组件使用正确的空白区域。我该如何使用它？

navbar.component.html

<div>
  <md-toolbar color="primary">
    <button md-icon-button (click)="nav.open()">
            <md-icon>menu</md-icon>
          </button>

    <span>Repository Manager</span>

    <span><md-icon>verified_user</md-icon></span>
  </md-toolbar>
</div>

<md-sidenav-container #nav>
  <md-sidenav>
    <br>
    <button md-raised-button color="accent" class="sideButton">Home</button>
    <br><br>
    <button md-raised-button color="accent" class="sideButton">Search</button>
  </md-sidenav>

</md-sidenav-container>

styles.css

body {
    margin: 0;
    font-family: Roboto, sans-serif;
  }

  md-card {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
  }

  md-toolbar-row {
    justify-content: space-between;
  }

  .done {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
  }

  md-sidenav {
    width: 10%;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
  }

  html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .sideButton {
    width: 100%;
  }

Answer 1

只需在 <md-sidenav>...</md-sidenav> 之后但在 <md-sidenav-container #nav> 内声明下一个组件。示例 from docs:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <!-- Your component starts here -->
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

小贴士： 您可以通过单击右侧的按钮查看 Angular Material 文档中的代码示例：

会节省很多时间。

如何在使用md-sidenav和md-toolbar的同时将右侧空置space用于新组件？

How to use the right side vacant space for a new component while using md-sidenav and md-toolbar?

angular-material2

angular