Четкость Полноэкранный модальный режим

Я использую инфраструктуру пользовательского интерфейса VMware Clarity, и это здорово. У него есть некоторые модальные функции, но я ищу полноэкранный модальный. Четкость бывает с определенными размерами, но не с полноэкранными.

Кто-нибудь знает, как я могу сделать модальный полноэкранный режим ясности?


person Albert Hoekstra    schedule 01.06.2018    source источник
comment
Что вы имеете в виду под 100% шириной и высотой полноэкранного режима? В каком случае оно вам нужно?   -  person Massimo Costa    schedule 01.06.2018


Ответы (1)


Модальные окна Clarity предназначены для предупреждения пользователя, диалоговых окон подтверждения и рабочих процессов, ориентированных на выполнение задач. Как правило, это задачи, которые требуют сосредоточения и внимания со стороны пользователя, но мы не хотим полностью вырывать их из контекста, который находится за модальным оверлеем. Они не были предназначены для использования в полноэкранном режиме.

Я бы не предлагал использовать полноэкранное модальное окно, в котором контекст полностью скрыт от ваших пользователей.

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

https://stackblitz.com/edit/clarity-dark-theme-v11-so-full-modal-css

fyi - чтобы переопределить css компонента Angular, вам понадобится ::ng-deep, чтобы переопределить определенные классы, которые необходимо настроить. например:

::ng-deep .modal-content-wrapper {
   height: 100%;
   width: 100%;
}
person hippeelee    schedule 01.06.2018