打开键盘时隐藏标签 [英] Hide tabs on keyboard open
问题描述
我想在键盘打开时隐藏我的标签,并在键盘关闭时再次显示标签.
I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
我知道我可以只使用AdjustSpan",仅此而已,但问题是如果我这样做,键盘也会隐藏我用于聊天的输入,因为它是页脚.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
隐藏标签的最佳方法是什么?
Whats the best way to hide the tabs?
我已经在 [ngClass] 中尝试过,我在 Keyboard.disableScroll 中尝试过,并且在 app.module.ts 中也尝试过使用参数 scrollAssist 和 autoFocusAssist 且值为 false ...
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
似乎没有任何效果.
知道我应该如何隐藏标签吗??
Any idea of how should I hide the tabs??
提前谢谢你!!
推荐答案
你必须为键盘交互添加一个事件监听器来添加(或删除)一些 css 类到 body-tag.在 ionic1 中,默认情况下从框架中添加了hide-on-keyboard-open"类.在 ionic2 中,您必须走自定义实现路径".所以,这就是你要找的东西:
You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) 按照 ionic2 文档中的说明安装键盘插件和 node_modules:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) 将插件添加到您的 app.modules.ts
2) Add the plugin to your app.modules.ts
3) 在 app.component.ts 的 device-ready 事件中添加所需的事件列表:
3) Add the desired eventlister withiin the device-ready event in your 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) 使用附加的类属性 (hideElementOnKeyboardShown) 将类定义添加到 app.scss
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) 将类添加到所需的元素,例如页脚、div 或其他:
5) Add the class to the desired element, eg an footer, div or 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-tag 中,否则在显示键盘时计算的 viewheight 不正确.
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
祝你有美好的一天!
这篇关于打开键盘时隐藏标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!