Tab icon switcher

by kerrydp

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.js"></script>

    <!-- App root element -->
    <div id="app">

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Scroll test</div>
            </div>
          </div>

          <!-- Bottom Tabbar -->
          <div class="toolbar tabbar toolbar-bottom">
              <div class="toolbar-inner">
                <a href="#tabhome" class="tab-link">
                  <i class="f7-icons size-25 iconswitch" data-tabswitch="house">house</i>
                </a>
                <a href="#tabmap" class="tab-link tab-link-active">
                  <i class="f7-icons size-25 iconswitch" data-tabswitch="compass">compass_fill</i>
                </a>
              </div>
            </div>

          <div class="tabs">
           <div id="tab1" class="tab tab-active">
             <div class="page-content">
             Tab 1
          </div>
          <div id="tab2" class="tab">
             <div class="page-content">
             Tab 2
          </div>
           </div>
          </div>

          

          
        </div>
      </div>
    </div>

CSS

#bigfixedblock {
  background-color: red;
  color: white;
  /*height: calc(230px + var(--f7-navbar-height));*/
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 2.5em;
}

#scrollarea {
  position: absolute;
  width: 100%;
}

JavaScript

var app = new Framework7({
  // App root element
  el: '#app',
  theme: 'ios'
});

var mainView = app.views.create('.view-main');