Угловой материал навигационного меню развернуть на полный экран - PullRequest
Новая
       6

Угловой материал навигационного меню развернуть на полный экран

0 голосов
/ 09 июня 2018

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

https://stackblitz.com/angular/pbndqaomepr?file=app%2Fmenu-overview-example.html

Когда я нажимаю на меню, angular показывает div, содержащий Item 1 и Item2 Это нормально для большого экрана.То, что я пытался сделать, это убедиться, что div расширяется до полноценных окон браузера на случай, если мобильные устройства.

Поэтому я добавил следующий код: 

@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    width: 100vw;
    height: 100vh
  } 
}

И используйте следующеешаблон меню: 

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class="menu-screen">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button> 
</mat-menu>

И ничего не происходит.

Мне нужен этот элемент matMenu, чтобы покрыть весь экран monile.Что я делаю не так?Один из моих друзей предложил прослушать пункт меню открытого события и показать всплывающее окно, заполняющее окно.Однако я чувствовал, что это будет громоздко.

Спасибо

1 Ответ

0 голосов
/ 09 марта 2019

Прежде всего, вам нужно либо применить этот код CSS ко всему документу, либо, если вы сохраняете CSS в своем компоненте, вам нужно установить режим инкапсуляции компонента на NONE.Поскольку меню создается в оверлейном контейнере как дочерний элемент для вашего тела, а не как дочерний элемент для вашего компонента.

Во-вторых, угловой материал создает несколько контейнеров, в которые инкапсулируется меню, и их положения должны бытьпереопределить.

Итак, в вашем файле menu-Overview-example.css введите этот код: 

.cdk-overlay-connected-position-bounding-box {
  left: 0 !important;
}
@media only screen and (max-width: 600px) {
  .menu-screen {
    position: fixed;
    max-width: unset !important;
    width: 100vw;
  } 
}

, а в файл menu-Overview-example.ts добавьте его в свой файл.Компонент декоратор: 

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Я создал разветвленную рабочую версию вашего кода здесь: https://stackblitz.com/edit/angular-sjy3em

Возможно, вы захотите сделать селекторы более конкретными, чтобы вы могли удалить! важныйдиректива из вашего кода, это плохая практика, но я использовал ее для простоты здесь.

...