Angular2材质布局设置

Question

我想通过使用新的angular/material2（material.angular.io）来找出在Material Design Lite网站（https://getmdl.io/components/index.html#layout-section）上复制固定标题示例的方法。

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

有没有人设法完成这个或尚未实现？

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