material.angular.io отзывчивый заголовок / панель инструментов - PullRequest
Новая
       20

material.angular.io отзывчивый заголовок / панель инструментов

0 голосов
/ 19 октября 2018

Каким образом material.angular.io добился эффекта, когда кнопки с верхней панели инструментов (Компонент, CDK, Руководство) переходят на следующую строку в качестве вкладки при достижении нижней точки останова?

1 Ответ

0 голосов
/ 19 октября 2018

Они используют два отдельных элемента <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:

enter image description here

...