Angular2材料布局设置

Question

我正在尝试找出一种在材料设计Lite站点（https://getmdl.io/components/index.html#layout-section）上复制固定标头示例的方法，使用新的Angular/材料2（Material.angular.io）。

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

是否有人设法完成了这项工作，或者尚未实施？

Answer 1

我有相同的问题，这是我开发的解决方案。

假设您使用Angular-CLI生成了项目并在应用程序中安装了材料附件，则这里是固定标头的代码布局，并且独立滚动的内容和侧边栏。

我正在使用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。另外，填充类和列表项悬停对于布局不是必不可少的。

将此代码添加到主样式中。Scss文件，也可以创建一个layout.scss file并导入到主样式中。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;
}

这是我创建的一个工作示例