v4
Support Framework7
logo_github stars forks

App Layout

First thing we should do for our App is to create index.html file with app's skeleton.

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS Bundle -->
    <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Path to Vue js -->
    <script type="text/javascript" src="path/to/vue.min.js"></script>
    <!-- Path to Framework7 Library Bundle JS-->
    <script type="text/javascript" src="path/to/framework7.bundle.min.js"></script>
    <!-- Path to Framework7 Vue Plugin Bundle -->
    <script type="text/javascript" src="path/to/framework7-vue.bundle.min.js"></script>
    <!-- Path to your app js where you init your app-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

The <div id="app"></div> is where your main app skeleton should be. You can mount its content as a component or (just for example) we can start to write app skeleton right inside of this div:

Basic Layout

Let's look at the very basic app layout:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
  </head>
  <body>
    <!-- App Root Element -->
    <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>
        <!-- Your main view, should have "main" prop -->
        <f7-view main>
          <!-- Initial Page -->
          <f7-page>
            <!-- Top Navbar-->
            <f7-navbar title="Awesome App"></f7-navbar>
            <!-- Toolbar-->
            <f7-toolbar bottom>
              <f7-link>Link 1</f7-link>
              <f7-link>Link 2</f7-link>
            </f7-toolbar>
            <!-- Page Content -->
            <p>Page content goes here</p>
            <f7-link href="/about/">About App</f7-link>
          </f7-page>
        </f7-view>
      </f7-app>
    </div>
    <!-- ... scripts ... -->
  </body>
</html>

Advanced Layout

Now, let's look on more advanced layout where we will also add side panels with views and popup

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
  </head>
  <body>
    <!-- App Root Element -->
    <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>

        <!-- Left Panel with "cover" effect -->
        <f7-panel left cover>
          <f7-view>
            <f7-page>
              <f7-navbar title="Left Panel"></f7-navbar>
              <f7-block>
                <p>Here comes the left panel text</p>
              </f7-block>
            </f7-page>
          </f7-view>
        </f7-panel>

        <!-- Right Panel with "reveal" effect -->
        <f7-panel right reveal>
          <f7-view>
            <f7-page>
              <f7-navbar title="Right Panel"></f7-navbar>
              <f7-block>
                <p>Here comes the right panel text</p>
              </f7-block>
            </f7-page>
          </f7-view>
        </f7-panel>

        <!-- Main view-->
        <f7-view main>
          <f7-page>
            <f7-navbar title="Awesome App"></f7-navbar>
            <!-- Page content -->
            <f7-block>
              <p>Here comes main view page text</p>
            </f7-block>
            <!-- Buttons to open panels -->
            <f7-row>
              <f7-col>
                <f7-button panel-open="left">Left Panel</f7-button>
              </f7-col>
              <f7-col>
                <f7-button panel-open="right">Right Panel</f7-button>
              </f7-col>
            </f7-row>
            <!-- Button to open popup -->
            <f7-button popup-open="#my-popup">Open Popup</f7-button>
          </f7-page>
        </f7-view>

        <!-- Popup. All modals should be outside of Views -->
        <f7-popup id="my-popup">
          <f7-view>
            <f7-page>
              <f7-navbar title="Popup">
                <!-- Link to close popup -->
                <f7-nav-right>
                  <f7-link popup-close>Close</f7-link>
                </f7-nav-right>
              </f7-navbar>
              <f7-block>
                <p>Here comes popup text</p>
              </f7-block>
            </f7-page>
          </f7-view>
        </f7-popup>
      </f7-app>
    </div>
    <!-- ... scripts ... -->
  </body>
</html>

You can read more about statusbar overlay, views, navbar, toolbar, pages, panels and other components in appropriate sections.

Initialize App

Now when we have basic template, we need to initialize our app in (for example) my-app.js