Question

我试图找到一种方法来复制Material Design Lite网站（https://getmdl.io/components/index.html#layout-section）上的固定标题示例，使用新的angular / material2（material.angular.io）。

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

有没有人设法完成这项任务还是未实施？

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

的工作示例

Angular2材质布局设置

1 个答案: