Ioni c большой модальный детектор, если клавиатура открыта - PullRequest
Новая
       7

Ioni c большой модальный детектор, если клавиатура открыта

0 голосов
/ 02 февраля 2020

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

Я попытался установить ширину с помощью приведенного ниже кода. 

.modal-xxl .modal-wrapper {
  --width: 94vw;
  --height: 94vh;
}

Это работает хорошо, пока я не начну использовать какой-либо ввод на модальном и откроется клавиатура. Поэтому размер модального остаётся шириной 94vw, но я бы хотел, чтобы модальный был на 100% шириной, как в обычном режиме.

Я не нашел ни одного класса, который бы указывал, что клавиатура открыта, но я знаю, что он должен существовать. По умолчанию модал имеет некоторый радиус границы, но когда клавиатура открыта, этот радиус по умолчанию исчезает (border-radius == 0px).

Кто-то знает, какой класс указывает, что клавиатура открыта?

1 Ответ

1 голос
/ 02 февраля 2020

Не думаю, что указанный класс c css применяется при открытой клавиатуре.

Я делаю нечто подобное в приложении, где скрываю панель инструментов при отображении клавиатуры. Чтобы определить, видна ли клавиатура, я использую следующий плагин: https://ionicframework.com/docs/native/keyboard

После установки вам просто нужно сослаться на него в конструкторе: 

import { Keyboard } from '@ionic-native/keyboard/ngx';

constructor(public keyboard: Keyboard) { }

И вы можете использовать keyboard.isVisible свойство в вашем html.

Я не пробовал это сам, но для вашего случая использования вы можете попробовать применить ngClass к оболочке модального представления (например, ion-app): 

<ion-app [ngClass]="{'global-keyboard-opened': keyboard.isVisible}">

И изменить модальную оболочку css на полноэкранный режим, когда этот класс присутствует.

...