App Layout

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <!-- Required meta tags-->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <!-- Color theme for statusbar (Android only) -->
  9.     <meta name="theme-color" content="#2196f3">
  10.     <!-- Your app title -->
  11.     <title>My App</title>
  12.     <!-- Path to Framework7 Library CSS Bundle -->
  13.     <link rel="stylesheet" href="path/to/framework7.bundle.min.css">
  14.     <!-- Path to your custom app styles-->
  15.     <link rel="stylesheet" href="path/to/my-app.css">
  16.   </head>
  17.   <body>
  18.     <!-- App Root Element -->
  19.     <div id="app"></div>
  21.     <script type="text/javascript" src="path/to/app.js"></script>
  22.   </body>
  23. </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 component layout:

  1. <!-- Main Framework7 App component where we pass Framework7 params -->
  2. <App params={{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }}>
  4.   <!-- Your main view, should have "main" prop -->
  5.   <View main>
  6.     <!--  Initial Page -->
  7.     <Page>
  8.       <!-- Top Navbar -->
  9.       <Navbar title="Awesome App"></Navbar>
  10.       <!-- Toolbar -->
  11.       <Toolbar bottom>
  12.         <Link>Link 1</Link>
  13.         <Link>Link 2</Link>
  14.       </Toolbar>
  15.       <!-- Page Content -->
  16.       <p>Page content goes here</p>
  17.       <Link href="/about/">About App</Link>
  18.     </Page>
  19.   </View>
  20. </App>
  21. <script>
  22.   import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-svelte';
  23. </script>

Advanced Layout

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

  1. <!-- Main Framework7 App component where we pass Framework7 params -->
  2. <App params={{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }}>
  4.   <!-- Left Panel with "cover" effect -->
  5.   <Panel left cover>
  6.     <View>
  7.       <Page>
  8.         <Navbar title="Left Panel"></Navbar>
  9.         <Block>
  10.           <p>Here comes the left panel text</p>
  11.         </Block>
  12.       </Page>
  13.     </View>
  14.   </Panel>
  16.   <!-- Right Panel with "reveal" effect -->
  17.   <Panel right reveal>
  18.     <View>
  19.       <Page>
  20.         <Navbar title="Right Panel"></Navbar>
  21.         <Block>
  22.           <p>Here comes the right panel text</p>
  23.         </Block>
  24.       </Page>
  25.     </View>
  26.   </Panel>
  28.   <!-- Main view -->
  29.   <View main>
  30.     <Page>
  31.       <Navbar title="Awesome App"></Navbar>
  32.       <!-- Page content -->
  33.       <Block>
  34.         <p>Here comes main view page text</p>
  35.       </Block>
  36.       <!-- Buttons to open panels -->
  37.       <Row>
  38.         <Col>
  39.           <Button panelOpen="left">Left Panel</Button>
  40.         </Col>
  41.         <Col>
  42.           <Button panelOpen="right">Right Panel</Button>
  43.         </Col>
  44.       </Row>
  45.       <!-- Button to open popup -->
  46.       <Button popupOpen="#my-popup">Open Popup</Button>
  47.     </Page>
  48.   </View>
  50.   <!-- Popup. All modals should be outside of Views -->
  51.   <Popup id="my-popup">
  52.     <View>
  53.       <Page>
  54.         <Navbar title="Popup">
  55.           <!-- Link to close popup -->
  56.           <NavRight>
  57.             <Link popupClose>Close</Link>
  58.           </NavRight>
  59.         </Navbar>
  60.         <Block>
  61.           <p>Here comes popup text</p>
  62.         </Block>
  63.       </Page>
  64.     </View>
  65.   </Popup>
  66. </App>
  67. <script>
  68.   import { App, NavRight, Panel, View, Page, Navbar, Block, Row, Col, Button, Popup, Link } from 'framework7-svelte';
  69. </script>

You can read more about 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.

← Package Structure

Initialize App →