1

对 Framework7 完全陌生，还没有完全掌握布局。试图结合提供的两个示例，即降级为面板的拆分视图：framework7.io/examples/split-view-panel/与标签栏布局framework7.io/examples/tab-bar/以便 iPad 等获得拆分面板视图，iPhone 获得标签栏。（即使用显示/隐藏侧边栏的相同 CSS 查询显示/隐藏标签栏）

我从拆分面板视图开始，从标签栏应用程序添加自定义 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来隐藏和显示选项卡栏到小提琴虽然这应该很容易）

4

1 回答 1

0

我通过将标签条代码移动到右下方解决了这个问题

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

还在标签栏 div 中添加了一个类 - .m-hide。

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

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

于 2016-03-04T10:43:19.590 回答