Question

我正在使用Angular Material来使用md-sidenav指令实现滑动导航栏。

的index.html

<div flex>
  <md-content>
    <p>Here is content.</p>
    <a href="">Click Me</a><!-- I want to be able click this even when the sidenav is open!!! -->
  </md-content>
</div>

<div ng-controller="SideNavCtrl as sd">
  <md-sidenav class="md-sidenav-right md-whiteframe-z2"
   md-component-id="right"
   md-is-open="sd.rightSideBarOpen"
   md-sidenav-focus=>
    <md-content>
      <p>Side Nav content</p>
    </md-content>
  </md-sidenav>
</div>

这很好用，但是当导航打开时，只需点击两下即可与主窗口中的内容进行交互。我理解这是材料堆叠工作表范例的预期行为，但它不是我想要的这个项目的行为。有趣的是，当使用md-is-locked-open属性时，主要内容和sidenav都是焦点。

Answer 1

您可以使用以下CSS覆盖背景：

md-backdrop.md-sidenav-backdrop {
  display: none;
}

虽然您可能希望在Github上打开一个请求此功能的票证，因为这可能是应该内置的。

https://github.com/angular/material/issues

Answer 2

为了避免失去背景功能（例如，点击时隐藏sidenav），最好使用background-color:transparent而不是更改显示属性

Angular-Material有某种方式md-sidenav和主要内容都可以有焦点

2 个答案: