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