Как показать в угловом диалоге как попвер?

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

Это текущее поведение диалогового окна углового материала введите здесь описание изображения

Это поведение, которое я ищу. введите здесь описание изображения

Ссылка: https://material.angular.io/components/dialog/overview


person Esteban Chornet    schedule 29.06.2020    source источник


Ответы (1)


Этого можно достичь с помощью MatDialog, но это сопряжено с некоторыми неудачами (и, вероятно, это связано с созданием собственного всплывающего окна или использованием одного из существующих).

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

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

Что вы хотите сделать, так это получить ограничивающий прямоугольник кнопки и использовать эти значения для установки свойства position на MatDialogConfig.

Базовая реализация (справа от кнопки) здесь. Для другого позиционирования соответствующим образом скорректируйте расчеты (должно быть довольно логично).

Опять же, я советую заглянуть в CDK Overlay в Material и создать собственный компонент, поскольку он, вероятно, сэкономить ваше время в долгосрочной перспективе.

person TotallyNewb    schedule 01.07.2020
comment
Спасибо за Ваш ответ. Я не могу открыть добавленный вами stackblitz. Но все равно спасибо! - person Esteban Chornet; 02.07.2020
comment
Извините за это - обновил ссылку. Это немного, но, надеюсь, поможет вам в правильном направлении, если вы решите продолжить маршрут MatDialog :) - person TotallyNewb; 02.07.2020