javascript - Framework7 : Split view degrading to tab bar?(组合示例)

Question

对 Framework7 完全陌生，尚未完全掌握布局。试图结合提供的两个示例，即 Split View降级为面板:framework7.io/examples/split-view-panel/与标签栏布局 framework7.io/examples/tab-bar/这样，iPad 等设备将获得分割面板 View ，而 iPhone 则获得标签栏。 (即使用显示/隐藏侧边栏的相同 css 查询显示/隐藏选项卡栏)

我从分割面板 View 开始，从选项卡栏应用程序添加了自定义 css，并将 .tabs .toolbar-through 添加到 .views div 中。将 .tab .active 添加到 .view-main div 中。并复制并粘贴工具栏代码:

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a href="#view-1" class="tab-link active"> <i class="icon tabbar-demo-icon-1"></i><span class="tabbar-label">Information</span></a><a href="#view-2" class="tab-link"><i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label">Inbox</span></a>
    <a href="#view-3" class="tab-link"> <i class="icon tabbar-demo-icon-3"><span class="badge bg-red">4</span></i><span class="tabbar-label">Upload</span></a>
    <a href="#view-4" class="tab-link"> <i class="icon tabbar-demo-icon-4"></i><span class="tabbar-label">Photos</span></a>
  </div>
</div>

这会将工具栏添加到 DOM，但它不可见。 Jsfiddle:https://jsfiddle.net/t6295yqs/

在开发工具中闲逛，我无法从生成的输出中真正理解为什么它没有显示，这不是 z-index 或一般可见性的问题...任何有关如何使其工作的指示将不胜感激

(注意，尚未添加 css 来隐藏和显示 fiddle 的选项卡栏，尽管这应该很容易)

Answer 1

我通过将选项卡栏代码移动到右下方解决了这个问题

  <div class="panel-overlay"></div>

还向选项卡栏 div 添加了一个类 - .m-hide。

@media (min-width: 769px) {
  .xs-show {
    display:none;
  }
}

https://jsfiddle.net/t6295yqs/2/