Question

我正在尝试使用角度材料sidenav。一切都按预期工作，但侧面滑过标题。我该如何解决这个问题？我创建了一个能够查看我的代码的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>

Answer 1

将md按钮放在

之外

 <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>

修改将SideNav和内容嵌入<md-content flex></md-content>

<强> DEMO

标题下的角度材料sidenav

1 个答案: