Framework7: Разбитое представление ухудшается до панели вкладок? (объединенные примеры)

Question

Абсолютно новый для Framework7 и еще не полностью понимающий макет. Пытался объединить два предоставленных примера, а именно разделенное представление, деградирующее до панели: http://framework7.io/examples/split-view-panel/ с макетом панели вкладок http://framework7.io/examples/split-view-panel/, чтобы iPad и т.п. получить разделенный вид панели и iPhone получить панель вкладок. (т.е. показать / скрыть панель вкладок, используя тот же запрос CSS, который показывает / скрывает боковую панель)

Я начал с представления разделенной панели, добавил пользовательский CSS из приложения панели вкладок и добавил.tabs.toolbar-through в div.views. Добавлен.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, чтобы скрыть и отобразить панель вкладок на скрипке, хотя это должно быть достаточно просто)

Answer 1

Я решил эту проблему, переместив код табуляции прямо под

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

Также добавлен класс - .m-hide к элементам панели вкладок.

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

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