Добавление поддержки полноэкранного режима в Ng-Zorro

RedDeveloper
03.01.2023 21:48
Добавление поддержки полноэкранного режима в Ng-Zorro
Ant design + Angular = ng-zorro

В эти дни я работаю над проектом и выбрал ng-zorro в качестве библиотеки компонентов для этой задачи.

Недавно я добавил полноэкранный режим в свое приложение через requestFullscreen API и заметил, что модалы, меню выбора и т.д. отсутствуют в полноэкранном режиме.

Почему это происходит?

При переходе в полноэкранный режим с помощью requestFullscreen браузер покажет только элемент, на котором был вызван метод, и всех его потомков.

Когда мы открываем новый модал или меню выбора, они добавляются в тело документа, и поэтому отсутствуют в полноэкранном режиме.

Они появляются, только если мы входим в полноэкранный режим на всем элементе body.

Существует несколько подходов к модалам, поддерживающим полноэкранный режим:

Изменение OverlyContainer

В итоге я решил проблему в своем проекте с помощью этого решения. ng-zorro использует @angular/cdk за кулисами, который раскрывает нечто под названием FullscreenOverlayContainer.

Простая замена стандартного OverlyContainer на FullscreenOverlyContainer будет обрабатывать полноэкранный режим для вас:

{ provide: OverlayContainer, useClass: FullscreenOverlayContainer,}

Вы не можете запустить полноэкранный режим при просмотре редактора Stackblitz, поэтому попробуйте рабочий пример , а код смотрите здесь .

CSS Fullscreen

Это решение больше похоже на обходной путь к решению проблемы, но оно работает.

Я действительно столкнулся с этим в этом ng-zorro вопросе. В основном решение заключается в том, чтобы ввести полноэкранный режим для элемента body, чтобы модалы и всплывающие окна были включены, и использовать css для приведения содержимого, которое вы действительно хотите, чтобы покрыть весь экран.

Смотрите этот рабочий пример из выпуска.

Добавление к полноэкранному элементу

Это решение не поддерживается ng-zorro, но вы можете найти его полезным в будущем.

Некоторые библиотеки поддерживают определение места прикрепления таких модалов, например @ngneat/dialog и мы можем просто прикрепить наше содержимое к элементу fullscreen, передав параметр container:

import { inject } from '@angular/core';
import { DialogService } from '@ngneat/dialog';

inject(DialogService).open(MyDialogComponent, {
  container: document.fullscreenElement || document.body
});

Таким образом, модал находится под полноэкранным элементом и включен в представление.

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?

03.02.2023 09:34

Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому дизайну, а размер сборки просто крошечный.

LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу

03.02.2023 08:15

Увеличение подматриц на единицу - LeetCode

Переключение светлых/темных тем
Переключение светлых/темных тем

02.02.2023 09:04

В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно использовать для установки светлых/темных стилей и добавления интерактивных функций с помощью JavaScript. Следуйте инструкциям, и вы готовы к работе!

Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения

02.02.2023 07:39

Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой статье мы расскажем, как создавать и управлять отношениями "многие ко многим" в Laravel с помощью методов присоединения и отсоединения вместо...

В PHP
В PHP

02.02.2023 07:16

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

Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel

01.02.2023 11:27

Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку приложений, такие как маршрутизация, ORM (Object-Relational Mapping), шаблонизация и аутентификация. Laravel имеет архитектуру на основе...