forked from frandiox/OnsenUI-Todo-App
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·75 lines (62 loc) · 2.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onsen UI Memo App 2.0</title>
<script src="https://unpkg.com/[email protected]/js/onsenui.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/showcase.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/onsen-css-components.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- First navigation component: Navigator. This will remain always on top of the app. -->
<ons-navigator id="myNavigator" page="splitter.html">
</ons-navigator>
<!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
<ons-template id="splitter.html">
<ons-splitter id="mySplitter">
<ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px">
</ons-splitter-side>
<ons-splitter-content page="tabbar.html">
</ons-splitter-content>
</ons-splitter>
</ons-template>
<!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
<ons-template id="tabbar.html">
<ons-page id="tabbarPage">
<ons-toolbar>
<div class="left">
<!-- Toolbar-button with different icons depending on the platform. -->
<ons-toolbar-button component="button/menu">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">To-Do List App 2.0</div>
<div class="right">
<!-- Toolbar-button only visible for iOS/other. -->
<ons-if platform="ios other">
<ons-toolbar-button component="button/new-task">New</ons-toolbar-button>
</ons-if>
</div>
</ons-toolbar>
<!-- Floating Action Button only visible for Android. -->
<ons-if platform="android">
<ons-fab position="right bottom" component="button/new-task">
<ons-icon icon="md-edit"></ons-icon>
</ons-fab>
</ons-if>
<!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
<ons-tabbar id="myTabbar" position="auto">
<ons-tab page="html/pending_tasks.html" label="Pending" active>
</ons-tab>
<ons-tab page="html/completed_tasks.html" label="Completed">
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
</body>
</html>