Html material.angular.io响应标题栏/工具栏

material.angular.io是如何实现这样的效果的：当您点击较低的断点时，顶部工具栏组件CDK的按钮以tabbar的形式出现在下一行？

它们使用两个单独的元素并设置显示：在具有类的元素上无。除非是较小的断点，否则文档导航栏显示较小。它们对顶部视图的作用相反，当视图较大时显示，当视图较小时隐藏。所以它最终看起来像这样：

HTML:

从devtools：

---

首先，考虑一下Chrome DeVoots在Mitch的回答中所说的，以及查看GITHUB上可用的源代码：所以，他们正在使用，NavBar没有文档，这是他们从材质2中删除的，这是他们在自己的项目中建立的一个角度组件。它可能是一种叫做NavbarComponent的东西。您可以在任何元素上放置一个mat-elevation-z6类或任何您想要的数字。它只是添加了框阴影。

<nav class="docs-navbar-header">
  <!--nav options here-->
</nav>
<nav class="docs-navbar-show-small">
  <!--same nav options here-->
</nav>

@media screen and (max-width: $breakpoint) {
  .docs-navbar-header {
    display: hidden;
  }
  .docs-navbar-show-small {
    display: flex;
    ...
  }
}
@meda screen and (min-width: $breakpoint) {
  .docs-navbar-header {
    display: flex;
    ...
  }
  .docs-navbar-show-small {
    display: hidden
  }
}