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

来自开发者工具：