Framework7-Vue Starter

by caio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.8/css/framework7.min.css">
<script src="https://unpkg.com/[email protected]/dist/framework7-vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  
  <!-- Main View -->
  <f7-view id="main-view" main>
    <f7-page>
      <f7-navbar title="Modal Sheet with tabs"></f7-navbar>
      <f7-block>
        <f7-button class="col" fill raised @click="$refs.filesSelectCloud.f7Sheet.open()">+ File Attach</f7-button>
      </f7-block>
   
      <f7-sheet ref="filesSelectCloud" style="height: 80%">
        <f7-toolbar tabbar scrollable>
          <f7-link no-link-class tab-link="#tab1" tab-link-active>Category 1</f7-link>
          <f7-link no-link-class tab-link="#tab2">Category 2</f7-link>
          <f7-link no-link-class tab-link="#tab10">Category 10</f7-link>
        </f7-toolbar>

        <f7-tabs swipeable>
          <f7-tab id="tab1" tab-active>1 content here</f7-tab>
          <f7-tab id="tab2">2 bla bla</f7-tab>
          <f7-tab id="tab10">10 bla bla</f7-tab>
        </f7-tabs>

      </f7-sheet>

    
    </f7-page>
  </f7-view>

</div>

JavaScript

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

// Init App
new Vue({
  el: '#app',
  // Init Framework7 by passing parameters here
  framework7: {
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'md', // Automatic theme detection
    // App routes
  }
});