Angular-Material 有什么方法可以使 md-sidenav 和主要内容都具有焦点

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>

效果很好，但是当导航打开时，需要单击两次才能与主 window 中的内容进行交互。我知道这是 Material 堆叠表范例的预期行为，但这不是我想要的这个项目的行为。有趣的是，当使用 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 和主要内容都具有焦点

Angular-Material is there some way md-sidenav and main content can both have focus

angularjs

angular-material