bootstrap Make it optional to hide offcanvas when resizing the window

5us2dqdw  于 4个月前  发布在  Bootstrap
关注(0)|答案(1)|浏览(68)

前提条件

建议

你好,
当用户调整窗口大小时,所有不在固定位置的 offcanvas 都会被隐藏,因为这段代码:
bootstrap/js/src/offcanvas.js
第266行到第272行的 bada2b9
| | EventHandler.on(window,EVENT_RESIZE,()=>{ |
| | for(constelementofSelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')){ |
| | if(getComputedStyle(element).position!=='fixed'){ |
| | Offcanvas.getOrCreateInstance(element).hide() |
| | } |
| | } |
| | }) |
所以我建议使这种行为可选,例如通过创建一个 hideOnWindowResizing 选项(默认情况下为 true)。

动机和背景

在某些情况下,我们不希望在窗口调整大小时隐藏 offcanvas,即使它们的位置是绝对的。在我创建的一些 UI 中,这给我的用户带来了问题。如果能实现这样一个选项就非常感谢了。
场景示例:

  1. 用户使用 Android 移动设备。
  2. DOM 有一个 .offcanvasposition: absolute
  3. .offcanvas 包含一个 <input type="text">
  4. 用户点击 <input type="text"> 以输入内容。
  • .offcanvas 将被隐藏,因为它的位置不是 fixed。解释:
  • 点击 <input type="text"> 将打开移动虚拟键盘。
  • 当打开移动虚拟键盘时,将在 resize 上触发 window 事件。
  • 由于此事件,当前侦听器将被执行。
icomxhvb

icomxhvb1#

在这段更新的代码中,我在窗口调整大小时添加了一个检查,以查看hideOnWindowResizing选项是否为true或false。如果选项为false,则不会隐藏offcanvas。
我添加了一个名为hideOnWindowResizing的新构造函数选项,默认值为true。

相关问题