Модальные окна 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