#angular #angular-material #modal-dialog #mat-dialog #non-modal
Вопрос:
быстрый вопрос. До сих пор я не мог найти ответа. Есть ли способ создать немодальный диалог материалов в последней версии Angular? Я также посмотрел это здесь, на форуме, но также не смог найти решение для более старых версий Angular.
Я был бы признателен за ответ.
С наилучшими пожеланиями, Ник
Комментарии:
1. Вы можете использовать чистый html/ts/css для создания всего, что вам нужно. Что вы пробовали до сих пор ?
2. Я хотел использовать диалог материалов… Я думаю, что невозможно использовать диалог материалов, когда я хочу, чтобы он был немодальным, верно?
3. Да, диалог материалов в значительной степени представляет собой абстракцию, которая открывает ваш компонент внутри диалогового окна и предоставляет службы, которые позволяют вам взаимодействовать между диалогом и основным компонентом. Если вы хотите, чтобы у вас было такое же ощущение с точки зрения визуальных эффектов, вы можете попробовать использовать
mat-cardи разместить внутри логику, которая вам нужна
Ответ №1:
«Угловой» сам по себе является каркасом и, следовательно, никогда не будет иметь такой функции сам по себе.
Вы добавили angular-material тег, поэтому я предполагаю, что вы имеете в виду именно это — есть MatDialog, который можно дополнительно настроить как немодальный (хотя это зависит от определения, которое я предполагаю).
Вы можете использовать hasBackdrop: false (см. Документы), чтобы включить взаимодействие с элементами в фоновом режиме для MatDialog .
Вы можете добавить немного cdkDrag магии (см. Документы), чтобы сделать диалоговое окно перетаскиваемым.
Я собрал краткий пример на стекблитце.
Обратите внимание, что диалоговое окно по-прежнему будет работать как «ловушка фокусировки», т. е. Если вы продолжите нажимать вкладку, сфокусированные элементы будут обводить содержимое диалогового окна.
Если всего вышеперечисленного недостаточно, должно быть довольно легко реализовать свой собственный сервис для генерации полностью немодальных диалоговых окон с использованием углового наложения CDK (который является основой, на которой MatDialog фактически построен, если я правильно помню). Посмотрите документы.