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 →