角材质侧边在标题下

Angular material sidenav under the header

本文关键字：标题更新时间：2023-09-26

我正在尝试使用有角度的材料侧边。一切工作如预期，但侧边滑动的头部。我怎样才能解决这个问题呢?我创建了一个能够看到我的代码的planker，但planker不像预期的那样工作。提前感谢你的帮助。https://plnkr.co/edit/gr5n1AbBHADWY4L72MMg?p=preview

这是我代码的一部分，其余部分可以在Plunker

中看到

 <div>
     <md-toolbar class="md-accent">
          <div class="md-toolbar-tools">
              <h2>Logo here</h2>
          </div>
     </md-toolbar>
     </div>
     <div ng-controller="AdminController as ctrl" class="md-content" ng-cloak>
        <section layout="row" flex>
           <md-sidenav class="md-sidenav-left" md-component-id="left"
                            md-disable-backdrop md-whiteframe="4">
           <md-content layout-margin>
               <md-button ng-click="toggleLeft()" class="md-accent">
                   Close this Sidenav
               </md-button>
           </md-content>
                </md-sidenav>
                <md-content flex layout-padding>
                    <div layout="column">
                        <div>
                            <md-button ng-click="toggleLeft()" class="md-raised">
                                Toggle Sidenav
                            </md-button>
                        </div>
                    </div>
                </md-content>
            </section>
        </div>

将按钮放置在

外部

 <section layout="row" flex>
    <md-content flex layout-padding>
      <md-toolbar class="md-theme-indigo">
        <h2>Logo here</h2>
      </md-toolbar>
      <md-button ng-click="clickSide('left')"> Toggle Sidenav</md-button>
    </md-content>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav left</h1>
      </md-toolbar>
      <md-content layout-padding="">
        <md-tabs>
        </md-tabs>
      </md-content>
    </md-sidenav>
  </section>

编辑:

在<md-content flex></md-content>中嵌入SideNav和Content