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

Question

material.angular.io是如何实现以下效果的：当您击中较低的断点时，顶部工具栏（组件，CDK，指南）的按钮作为标签栏进入下一行？

Answer 1

他们使用两个单独的<nav>元素，并将display: none设置为类.docs-navbar-show-small的元素，除非它是较小的断点。对于顶部视图，它们执行相反的操作，当视图较大时显示，而视图较小时隐藏。所以最终看起来像这样：

HTML：

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

CSS：

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

通过devtools：