Скрыть вкладки на открытой клавиатуре

Question

Я хочу скрыть свои вкладки, когда клавиатура открыта, и снова показать вкладки, когда клавиатура закрыта.

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

Какой лучший способ скрыть вкладки?

Я уже пробовал с [ngClass] в, я пытался с Keyboard.disableScroll, а также в app.module.ts, используя параметры scrollAssist и autoFocusAssist со значением false...

Ничто не похоже на работу.

Любая идея о том, как я должен скрыть вкладки?

Заранее спасибо!!

Answer 1

Вы должны добавить список событий для взаимодействия с клавиатурой, чтобы добавить (или удалить) некоторый класс css к тегу body. В ionic1 класс "скрыть на клавиатуре" был добавлен по умолчанию из фреймворка. В ionic2 вы должны пройти "путь к пользовательской реализации". Итак, вот что вы ищете:

1) Установите keyboard-plugin и node_modules, как описано в документации по ionic2:

ionic plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

https://ionicframework.com/docs/native/keyboard/

2) Добавьте плагин в ваш app.modules.ts

3) Добавьте нужный список событий в событие готовности устройства в вашем app.component.ts:

this.platform.ready().then(() => {

        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();

        this.keyboard.onKeyboardShow().subscribe(() => {
            document.body.classList.add('keyboard-is-open');
        });

        this.keyboard.onKeyboardHide().subscribe(() => {
            document.body.classList.remove('keyboard-is-open');
        });
})

4) Добавьте определение класса в ваш app.scss с помощью дополнительного атрибута class (hideElementOnKeyboardShown)

body.keyboard-is-open .hideElementOnKeyboardShown{
    display: none;        
}

5) Добавьте класс к желаемому элементу, например, нижнему колонтитулу, div или sth else:

<ion-footer class="hideElementOnKeyboardShown">
    <button round ion-button (click)="onLogin()"  block>
        <ion-icon name="logo-facebook" padding></ion-icon>
            Login
    </button>
</ion-footer>

6) в этом случае поместите тег ion-footer внутри тега content, в противном случае вычисленная высота обзора будет неправильной при отображении клавиатуры.

хорошего дня!

Answer 2

Просто добавьте следующие строки в ваш config.xml.

<preference name="android- 
      manifest/application/activity/@android:windowSoftInputMode" 
   value="adjustPan" />

....
</platform>

Для этого нужно изменить значение по умолчанию, которое Cordova записывает в ваш AndroidManifest.xml, чтобы управлять глобальным поведением ввода с клавиатуры для вашего приложения.

Answer 3

Вы можете достичь этого, написав директиву, которая подписывается на события Keyboard, а затем добавляет (скрывает)/ удаляет (показывает) свойство / класс css (display: none) к элементу tabs после того, как клавиатура показана / скрыта.

@Directive({
    selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
    private static CSS_CLASS_NAME = 'hide-tab-bar';

    private show: Subscription;
    private hide: Subscription;

    constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {

        platform.ready().then(() => {
            this.show = keyboard.onKeyboardShow().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
            );

            this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
            );
        });
    }

    ngOnDestroy(): void {
        if (this.hide !== undefined) {
            this.hide.unsubscribe();
        }
        if (this.show !== undefined) {
            this.show.unsubscribe();
        }
    }
}

добавить класс css в app.scss (например):

.hide-tabs {
display: none;
}

на элементе ваших вкладок <ion-tabs hideTabs> </ion-tabs>

** код добавлен для подтверждения концепции