Угловая, боковая панель материала и липкая панель инструментов - PullRequest
Новая
       29

Угловая, боковая панель материала и липкая панель инструментов

0 голосов
/ 27 декабря 2018

Я экспериментирую с материалом side nav и Angular 6/7.То, чего я хочу достичь, показано на следующих двух изображениях.

Приложение со свернутой боковой панелью:

enter image description here

Приложение срасширенная боковая навигация:

enter image description here

Вкратце:

  • боковая навигация, которая может открываться и закрываться кнопкой.
  • a фиксированная панель инструментов над содержимым.
  • прокручиваемый контент.

Основная структура следующая, намекаемая здесь . 

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content, toolbar here</mat-sidenav-content>
</mat-sidenav-container>

Минимальный рабочий образец можно найти здесь , при стеке.

Моя проблема: панель инструментов не липкая ипрокручивается вместе с контентом, когда я начинаю прокручивать.

Мой вопрос: Как сделать так, чтобы панель инструментов держалась сверху и не прокручивалась вместе с контентом?

Примечание: Сама боковая навигация исправлена, поскольку она имеет fixedInViewport="true".

1 Ответ

0 голосов
/ 28 декабря 2018

Я отредактировал ваш образец slackblitz, как показано ниже ..., а также переместил приложение HELLO вправо, как вы сказали в комментарии

отредактировал slackblitz

сделано путем добавления position-fixed класс с position: fixed

...