Angular2 Material 布局设置

Question

我正在尝试找出一种方法来使用新的 angular/material2 (material.angular.io) 在 Material Design Lite 网站 ( https://getmdl.io/components/index.html#layout-section ) 上复制 Fixed Header 示例。

如果我使用工具栏组件，它总是在页面和实际组件之间留下间隙。

有没有人设法做到这一点，或者还没有实现？

Answer 1

我遇到了同样的问题，这是我开发的解决方案。

假设您使用 angular-cli 生成了您的项目并在您的应用程序中安装了 MaterialComponents，这里是固定标题和独立滚动内容和侧边栏的代码布局。

顺便说一句，我正在使用 scss。

首先是 app.component.html 代码

<md-toolbar>
  <span>App title</span>
  <span class="filler"></span>
  <span> right aligned text</span>
</md-toolbar>
<md-sidenav-container class="main-container">
  <md-sidenav class="main-sidenav" #sidenav mode="side" opened="true">
    <div class="nav-wrapper">
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item {{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item 1{{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
      <!-- this is here just to make the sidebar content scrollable -->
      <md-nav-list>
        <md-list-item *ngFor="let link of [1,2,3,4,5,6,7,8,9,10]">
          <a md-line href="...">nav list item 2{{ link }}</a>
          <button md-icon-button >
            icon
          </button>
        </md-list-item>
      </md-nav-list>
    </div>
  </md-sidenav>
  <div class="content-wrapper">
    <div class="main-content">
      <!-- this is here just to make the content scrollable -->
      Add a huge lorem ipsum here and you will see the results
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus </p>
    </div>
  </div>
</md-sidenav-container>

现在是scss代码如果您使用其他 css 预处理器，代码仍然有效，因为我只是嵌套 css。此外，填充类和列表项悬停对于布局不是必不可少的。

将此代码添加到主 styles.scss 文件中，或者您可以创建一个 layout.scss 文件并导入到主 styles.scss 文件中。

/* You can add global styles to this file, and also import other style files */
body {  margin:0;  padding:0; }

.main-container {
  width: 100vw;
  height: 100vh;
  //border: 1px solid #000;

  md-sidenav {
    width: 250px;
  }

  .mat-sidenav-content,
  md-sidenav {
    display: flex;
    overflow: visible;
  }

  .nav-wrapper {
    width:250px;
    // this is what makes the magic happens
    overflow: auto;
    // just to set the sidebar apart
    background: #efefef;
  }

  .content-wrapper {
    overflow: auto;
  }
  .main-content {
    padding: 20px;
  }

}

md-toolbar.mat-toolbar {
  // just to set the toolbar apart
  background-color: red;
}

.filler {
  flex: 1 1 auto;
}

md-list-item:hover {
  background: #666;
  color: white;
}

这是我创建的一个工作示例 http://plnkr.co/edit/bMmapUPobeALmyIVbeRm?p=preview