如何使用角材料

Question

我想箱子佈局，因爲在http://flatlogic.github.io/angular-material-dashboard/#/dashboard

我用下面的佈局嘗試，但我不能夠達到它來創建固定sidenav和固定工具欄，其中頂部的工具欄是固定的，我們將獲得滾動僅適用於內容視圖

在上面的鏈接提到

Answer 1

像這樣的事情？

angular.module('BlankApp', ['ngMaterial']) 
 
    .controller('ctrl', function ($scope, $timeout, $mdSidenav, $log) { 
 
    $scope.toggleRight = function(){ 
 
     $mdSidenav("right").toggle(); 
 
    }; 
 
    })

body{ 
 
    /* This is only needed because I can't add layout="column" to the BODY tag in this example. */ 
 
    display: flex; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet"/> 
 
<div ng-app="BlankApp" layout="column" flex> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-messages.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script> 
 

 
<div ng-controller="ctrl" layout="row" flex> 
 
    <md-sidenav md-is-locked-open="true" style="width: 80px;"> 
 
    <md-toolbar> 
 
     <a class="md-toolbar-tools"><h1>AMD</h1></a> 
 
    </md-toolbar> 
 
    left side 
 
    </md-sidenav> 
 
    <div layout="column" flex> 
 
    <md-toolbar layout="row" layout-align="end center"> 
 
     <md-button class="toolbar-button">Search</md-button> 
 
     <md-button class="toolbar-button" ng-click="toggleRight()">Toggle Right</md-button> 
 
    </md-toolbar> 
 
    <md-content flex layout-padding> 
 
     <div style="height: 2000px">tall content</div> 
 
    </md-content> 
 
    </div> 
 
    <md-sidenav class="md-sidenav-right" md-component-id="right" style="width: 80px;"> 
 
    <md-toolbar> 
 
     <a class="md-toolbar-tools"><h1>right</h1></a> 
 
    </md-toolbar> 
 
    right side 
 
    </md-sidenav> 
 
</div> 
 
</div>

Answer 2

你需要使用一個CSS Flexbox，就如何acheive佈局。這使您能夠相應地安排項目。使用overflow屬性來控制滾動條。在這裏看到：

https://www.w3schools.com/css/css3_flexbox.asp

我爲您創建一個樣本小提琴：https://jsfiddle.net/q0g6gtn9/

HTML：

<div class="wrap"> 
    <div class="header">Navigation bar</div> 
    <div class="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing..</p>    
    </div> 
</div> 

CSS：

html, 
body, 
.wrap { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
} 

p { 
    margin-bottom: 1em; 
} 

.wrap { 
    display: flex; 
    flex-direction: column; 
} 

.header { 
    flex: 0 0 auto; 
    background-color: red; 
    padding: 1em; 
} 

.content { 
    flex: 1 1 auto; 
    position: relative; 
    overflow-y: auto; 
}