Setting sidenav below toolbar in angular material

2019-07-08 10:26发布

站内问答 / 前沿技术
746 3 6

How can I set Side nav below the toolbar in angular material design? so that sidenav does not come over toolbar..

3条回答
你好瞎i
2楼-- · 2019-07-08 10:58

Here you go. This is what you want, in case it will help someone by the way

 <body ng-app="" layout="column">
      <md-toolbar>
      </md-toolbar>
      <md-content flex>
           <md-sidenav>
           </md-sidenav>
           <ui-view></ui-view>
      </md-content>
 </body
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-07-08 10:59 
 <mat-drawer-container  class="example-container">
    <mat-toolbar  class="example-header" class="fixed-header" color="primary" >
        <mat-toolbar-row>

    <button 
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()">
    <mat-icon aria-label="Side nav toggle icon" *ngIf="drawer.opened"><span><i class="fa fa-close"></i></span></mat-icon>
    <mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened"><span><i class="fa fa-th-large"></i></span></mat-icon>
    </button>


  </mat-toolbar-row>
</mat-toolbar>
  <mat-drawer #drawer class="example-sidenav" mode="side" opened >
      <mat-nav-list>
          <a mat-list-item href="#"><i class="fa fa-dashboard"></i><span class="nav-label">Dashboard</span></a>
          <a mat-list-item href="#"><i class="fa fa-desktop"></i><span class="nav-label">Branches</span></a>

        </mat-nav-list>


  </mat-drawer>




  <div class="example-sidenav-content">

  <router-outlet></router-outlet>
  </div>
  <mat-toolbar class="example-footer">Footer</mat-toolbar>
</mat-drawer-container>
查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2019-07-08 11:06

It's a matter of layout. Just use this page structure:

<div id="main" class="layout-row">
    <div id="content" class="layout-column flex">
        <md-toolbar>
            YOUR TITLE HERE
        </md-toolbar>
        <md-content>
            YOUR CONTENTS HERE
        <md-content>
    </div>

    <md-sidenav class="md-sidenav-left" md-component-id="myPanel">
        THE SIDENAV CONTENT
    <md-sidenav>
</div>

And that's it!

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)