swipeable-tab-with-search-bar

Framework7 Vue 3.6.7 swipeable tab with search bar

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.7/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/3.6.7/css/framework7.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-vue.min.js"></script>
<div id="app">
  <!-- Main Framework7 App component where we pass Framework7 params -->
  <f7-app :params="{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }">
    <!-- Status bar overlay for full screen mode (Cordova or PhoneGap) -->
    <f7-statusbar></f7-statusbar>

    <!-- Main view-->
    <f7-view main>
      <f7-page :page-content="false">
        <f7-navbar>
          <f7-nav-left>
            <f7-link class="panel-open" open-panel="left" icon="fa fa-bars"></f7-link>
          </f7-nav-left>
          <div class="title">Test</div>
          <f7-nav-right>
            <f7-link class="searchbar-enable" icon="fa fa-search"></f7-link>
          </f7-nav-right>
          <f7-searchbar class="searchbar-demo" expandable search-container=".search-list" search-in=".item-title"></f7-searchbar>
        </f7-navbar>
        <f7-toolbar bottom>
          <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 swipeable>
          <f7-tab id="tab-1" class="page-content" tab-active>
            <f7-block>
              <p>Tab 1 content</p>
              ...
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-2" class="page-content">
            <f7-block>
              <p>Tab 2 content</p>
              ...
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-3" class="page-content">
            <f7-block>
              <p>Tab 3 content</p>
              ...
            </f7-block>
          </f7-tab>
       ...

JavaScript

Framework7.use(Framework7Vue);

new Vue({
  el: '#app',
  data() {
    return {
      f7params: {
        routes: [],
        name: 'My App',
        id: 'com.myapp.test',
      }
    }
  },

})