Framework7-Vue Starter

by mmis1000

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <!-- Statusbar -->
    <f7-statusbar></f7-statusbar>

    <!-- Main View -->
    <f7-view id="main-view" main>
      <f7-page :page-content="false">
        <f7-navbar title="Static Tabs" back-link="Back"></f7-navbar>
        <f7-toolbar tabbar>
          <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
          <f7-link tab-link="#tab-2">Tab 2</f7-link>
          <f7-link tab-link="#tab-3">Tab 3</f7-link>
        </f7-toolbar>
        <f7-tabs animated swipeable>
          <f7-tab id="tab-1" class="page-content" tab-active @tab:show="()=>tabShow('tab-1')">
            <f7-block>
              <p>{{tabid}}</p>
              ...1
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-2" class="page-content" @tab:show="()=>tabShow('tab-2')">
            <f7-block>
              <p>{{tabid}}</p>
              ...2
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-3" class="page-content" @tab:show="()=>tabShow('tab-3')">
            <f7-block>
              <p>{{tabid}}</p>
              ...3
            </f7-block>
          </f7-tab>
        </f7-tabs>
      </f7-page>
    </f7-view>

  </f7-app>
</div>

JavaScript

// Init F7 Vue Plugin
Framework7.use(Framework7Vue)

// Init App
new Vue({
  el: '#app',
  data() {
    return {
    	tabid:"tab-1",
      // Framework7 params here
      f7params: {
        root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'auto', // Automatic theme detection
      },
      route: {
      	
      }
    }
  },
  methods: {
  	tabShow(id) {
    alert()
    	debugger
    	console.log(id)
    	this.tabid = id
    }
  }
});