Framework7-Vue Starter

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/framework7-vue.bundle.min.js"></script>
<div id="app">
  <f7-app :params="f7params">
    <f7-view id="main-view" main>
      <f7-page>
        <f7-navbar>
          <f7-nav-title>My App</f7-nav-title>
        </f7-navbar>
        <f7-list>
          <f7-list-item
            class="smart-select-with-checkbox"
            title="Letters"
            smart-select
          >
            <select id='testselect' multiple ref='mySelect'>
              <option value="a" :selected='isSelected()'>A</option>
              <option value="b" :selected='isSelected()'>B</option>
              <option value="c" :selected='isSelected()'>C</option>
            </select>
            <f7-checkbox slot="root"></f7-checkbox>
          </f7-list-item>
        </f7-list>
        
      </f7-page>
    </f7-view>
  </f7-app>
</div>

CSS

.smart-select-with-checkbox .checkbox {
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--f7-checkbox-size) / 2);
  left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
}
.smart-select-with-checkbox .item-inner {
  margin-left: calc(var(--f7-checkbox-size) + 15px);
}

JavaScript

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


// Init App
new Vue({
  el: '#app',
  data() {
  	return {
		  // 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
      },
      selectedOptions: ['a', 'b']
    }
  },
  mounted () {
  },
  methods: {
  	isSelected () {
    debugger
      }
  }
});