框架7:拆分视图降级到标签栏?(组合示例）

Framework7: Split view degrading to tab bar? (combined examples)

本文关键字：组合 标签栏 拆分 视图 降级 框架      更新时间：2023-09-26

Framework7 的全新内容，尚未完全掌握布局。试图结合提供的两个示例，即将拆分视图降级为面板：framework7.io/examples/split-view-panel/与选项卡栏布局 framework7.io/examples/tab-bar/，以便 iPad 等获得拆分面板视图，iPhone获得选项卡栏。（即使用显示/隐藏侧边栏的相同 CSS 查询显示/隐藏选项卡栏）

我从拆分面板视图开始，从选项卡栏应用程序添加了自定义 css，并将 .tabs .toolbar-through 添加到 .viewsdiv。并复制并粘贴了工具栏代码： 

<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，但它不可见。杰斯菲德尔：https://jsfiddle.net/t6295yqs/

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

（请注意，尚未添加 css 来隐藏和显示小提琴的选项卡栏，尽管这应该很容易）

我通过将选项卡条形码移动到

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

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

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

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

相关文章：