Vật liệu dạng góc sidenav và thanh công cụ cố định

Question

Tôi đã sao chép bản trình diễn sidenav này từ tài liệu góc cạnh. https://material.angularjs.org/latest/demo/sidenav

Và thêm vào thanh công cụ demo đầu tiên đến nó từ https://material.angularjs.org/latest/demo/toolbar

Những gì tôi muốn là thanh công cụ để được cố định.

Bản trình diễn Codepen: http://codepen.io/gvorster/pen/BzWvGe

Khi thêm kiểu thanh công cụ này được cố định.

<md-toolbar class="md-hue-2" style="position:fixed !important"> 

Nhưng các biểu tượng bên phải đã biến mất.

Thay đổi kích thước màn hình cho đến khi sidenav được ẩn sẽ hiển thị các biểu tượng bên phải.

Loại bỏ các phong cách thể hiện các biểu tượng bên phải nhưng thanh công cụ chưa được khắc phục:

Có cách nào để có được một thanh công cụ dính và có biểu tượng bên rigth hiển thị.

Answer 1

Bạn phải sử dụng md-sidenav bên trong vùng chứa md-content. Ngoài ra, hãy thử sử dụng md-content thay vì thẻ div. Trong ví dụ của bạn, bạn đã đưa ra các giá trị sai cho thuộc tính layout-align. Vui lòng kiểm tra các giá trị thích hợp trong Docs.

Đây là cấu trúc cơ bản cho yêu cầu của bạn.

<md-content flex> 
    <md-toolbar> 
    </md-toolbar> 

    <md-content layout="column" layout-fill> 
     <!-- content --> 

     <md-sidenav> 
     </md-sidenav> 
    </md-content> 
</md-content> 

đây là bút làm việc. http://codepen.io/next1/pen/xOqMjy

Answer 2

Bạn cần thêm bố cục cho tất cả vùng chứa và di chuyển thanh công cụ ra khỏi md-nội dung sẽ được cuộn.

<div layout="row" flex> 
<md-sidenav></md-sidenav> 
<div layout="column" flex> 
    <md-toolbar></md-toolbar> 
    <md-content></md-content> 
</div> 
<md-sidenav></md-sidenav> 
</div> 

Dưới đây là một bản demo làm việc: http://codepen.io/anon/pen/EyWJKK?editors=1010