framework7rails 0.9.7 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +17 -0
- data/Framework7-0.9.6/.gitignore +5 -0
- data/Framework7-0.9.6/.jshintrc +33 -0
- data/Framework7-0.9.6/.travis.yml +5 -0
- data/Framework7-0.9.6/CHANGELOG.md +342 -0
- data/Framework7-0.9.6/Gruntfile.js +560 -0
- data/Framework7-0.9.6/LICENSE +20 -0
- data/Framework7-0.9.6/README.md +113 -0
- data/Framework7-0.9.6/apps/todo7/css/todo7.css +208 -0
- data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/todo7/index.html +112 -0
- data/Framework7-0.9.6/apps/todo7/jade/index.jade +99 -0
- data/Framework7-0.9.6/apps/todo7/js/todo7.js +102 -0
- data/Framework7-0.9.6/apps/todo7/less/todo7.less +221 -0
- data/Framework7-0.9.6/apps/todo7/manifest.php +27 -0
- data/Framework7-0.9.6/apps/weather7/css/weather7.css +291 -0
- data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/index.html +127 -0
- data/Framework7-0.9.6/apps/weather7/jade/index.jade +113 -0
- data/Framework7-0.9.6/apps/weather7/js/weather7.js +213 -0
- data/Framework7-0.9.6/apps/weather7/less/weather7.less +294 -0
- data/Framework7-0.9.6/apps/weather7/manifest.php +29 -0
- data/Framework7-0.9.6/bower.json +30 -0
- data/Framework7-0.9.6/dist/about.html +28 -0
- data/Framework7-0.9.6/dist/css/framework7.css +4922 -0
- data/Framework7-0.9.6/dist/css/framework7.min.css +15 -0
- data/Framework7-0.9.6/dist/css/framework7.rtl.css +427 -0
- data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +1 -0
- data/Framework7-0.9.6/dist/css/framework7.themes.css +279 -0
- data/Framework7-0.9.6/dist/css/framework7.themes.min.css +1 -0
- data/Framework7-0.9.6/dist/css/my-app.css +0 -0
- data/Framework7-0.9.6/dist/form.html +229 -0
- data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
- data/Framework7-0.9.6/dist/index.html +102 -0
- data/Framework7-0.9.6/dist/js/framework7.js +7479 -0
- data/Framework7-0.9.6/dist/js/framework7.min.js +18 -0
- data/Framework7-0.9.6/dist/js/my-app.js +48 -0
- data/Framework7-0.9.6/dist/services.html +28 -0
- data/Framework7-0.9.6/examples/split-view/about.html +19 -0
- data/Framework7-0.9.6/examples/split-view/css/my-app.css +23 -0
- data/Framework7-0.9.6/examples/split-view/index.html +135 -0
- data/Framework7-0.9.6/examples/split-view/jade/about.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/index.jade +107 -0
- data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/jade/services.jade +15 -0
- data/Framework7-0.9.6/examples/split-view/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/split-view/left-page-1.html +19 -0
- data/Framework7-0.9.6/examples/split-view/left-page-2.html +19 -0
- data/Framework7-0.9.6/examples/split-view/less/my-app.less +23 -0
- data/Framework7-0.9.6/examples/split-view/services.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/about.html +20 -0
- data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +56 -0
- data/Framework7-0.9.6/examples/split-view-panel/index.html +135 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +18 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +107 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +18 -0
- data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +19 -0
- data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +62 -0
- data/Framework7-0.9.6/examples/split-view-panel/services.html +20 -0
- data/Framework7-0.9.6/examples/tab-bar/about.html +19 -0
- data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +34 -0
- data/Framework7-0.9.6/examples/tab-bar/index.html +238 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +15 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +189 -0
- data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +15 -0
- data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +15 -0
- data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +35 -0
- data/Framework7-0.9.6/examples/tab-bar/services.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/about.html +22 -0
- data/Framework7-0.9.6/kitchen-sink/accordion.html +171 -0
- data/Framework7-0.9.6/kitchen-sink/color-themes.html +42 -0
- data/Framework7-0.9.6/kitchen-sink/contacts.html +190 -0
- data/Framework7-0.9.6/kitchen-sink/core-features.html +70 -0
- data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +233 -0
- data/Framework7-0.9.6/kitchen-sink/deep-2.html +22 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +19 -0
- data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +18 -0
- data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +64 -0
- data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +200 -0
- data/Framework7-0.9.6/kitchen-sink/forms-elements.html +359 -0
- data/Framework7-0.9.6/kitchen-sink/forms-selects.html +72 -0
- data/Framework7-0.9.6/kitchen-sink/forms-storage.html +181 -0
- data/Framework7-0.9.6/kitchen-sink/forms.html +56 -0
- data/Framework7-0.9.6/kitchen-sink/grid.html +140 -0
- data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +42 -0
- data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/index.html +466 -0
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +19 -0
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +119 -0
- data/Framework7-0.9.6/kitchen-sink/jade/about.jade +19 -0
- data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +133 -0
- data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +37 -0
- data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +115 -0
- data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +74 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +15 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +71 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +152 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +239 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +60 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +134 -0
- data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +52 -0
- data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +110 -0
- data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +38 -0
- data/Framework7-0.9.6/kitchen-sink/jade/index.jade +427 -0
- data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +20 -0
- data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +266 -0
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +22 -0
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +20 -0
- data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +170 -0
- data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +71 -0
- data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +36 -0
- data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +43 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +7 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +7 -0
- data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +17 -0
- data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +23 -0
- data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +21 -0
- data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +36 -0
- data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +21 -0
- data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +31 -0
- data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +44 -0
- data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +146 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +23 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +48 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +26 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +18 -0
- data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +57 -0
- data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +107 -0
- data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +195 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +54 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +50 -0
- data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +34 -0
- data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +27 -0
- data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +442 -0
- data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +245 -0
- data/Framework7-0.9.6/kitchen-sink/list-view.html +318 -0
- data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +36 -0
- data/Framework7-0.9.6/kitchen-sink/login-screen.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/media-lists.html +173 -0
- data/Framework7-0.9.6/kitchen-sink/messages.html +84 -0
- data/Framework7-0.9.6/kitchen-sink/modals.html +33 -0
- data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +46 -0
- data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +11 -0
- data/Framework7-0.9.6/kitchen-sink/no-navbar.html +11 -0
- data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +18 -0
- data/Framework7-0.9.6/kitchen-sink/notifications.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/panel-right2.html +16 -0
- data/Framework7-0.9.6/kitchen-sink/panel-right3.html +16 -0
- data/Framework7-0.9.6/kitchen-sink/panels.html +23 -0
- data/Framework7-0.9.6/kitchen-sink/photo-browser.html +36 -0
- data/Framework7-0.9.6/kitchen-sink/popover.html +21 -0
- data/Framework7-0.9.6/kitchen-sink/preloader.html +28 -0
- data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +52 -0
- data/Framework7-0.9.6/kitchen-sink/searchbar.html +233 -0
- data/Framework7-0.9.6/kitchen-sink/slider-custom.html +28 -0
- data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +89 -0
- data/Framework7-0.9.6/kitchen-sink/slider-nested.html +32 -0
- data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +29 -0
- data/Framework7-0.9.6/kitchen-sink/slider.html +54 -0
- data/Framework7-0.9.6/kitchen-sink/sortable-list.html +137 -0
- data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +216 -0
- data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +51 -0
- data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +109 -0
- data/Rakefile +2 -0
- data/framework7rails.gemspec +23 -0
- data/install_local.sh +2 -0
- data/lib/framework7rails/version.rb +4 -0
- data/lib/framework7rails.rb +8 -0
- data/update_from_vendor.rb +40 -0
- data/vendor/assets/images/i-f7.png +0 -0
- data/vendor/assets/images/i-form-calendar.png +0 -0
- data/vendor/assets/images/i-form-comment.png +0 -0
- data/vendor/assets/images/i-form-email.png +0 -0
- data/vendor/assets/images/i-form-gender.png +0 -0
- data/vendor/assets/images/i-form-name.png +0 -0
- data/vendor/assets/images/i-form-password.png +0 -0
- data/vendor/assets/images/i-form-settings.png +0 -0
- data/vendor/assets/images/i-form-tel.png +0 -0
- data/vendor/assets/images/i-form-toggle.png +0 -0
- data/vendor/assets/images/i-form-url.png +0 -0
- data/vendor/assets/javascripts/framework7.js +8288 -0
- data/vendor/assets/javascripts/framework7.js.map +1 -0
- data/vendor/assets/stylesheets/framework7.css +5078 -0
- data/vendor/assets/stylesheets/framework7.themes.css +279 -0
- metadata +231 -3
@@ -0,0 +1,266 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding List View
|
8
|
+
.right
|
9
|
+
a(href="#").open-panel.link.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="list-view")
|
13
|
+
.page-content
|
14
|
+
.content-block
|
15
|
+
p Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:
|
16
|
+
.content-block-title Data list, with icons
|
17
|
+
.list-block
|
18
|
+
ul
|
19
|
+
li
|
20
|
+
.item-content
|
21
|
+
.item-media
|
22
|
+
i.icon.icon-f7
|
23
|
+
.item-inner
|
24
|
+
.item-title Ivan Petrov
|
25
|
+
.item-after CEO
|
26
|
+
li
|
27
|
+
.item-content
|
28
|
+
.item-media
|
29
|
+
i.icon.icon-f7
|
30
|
+
.item-inner
|
31
|
+
.item-title John Doe
|
32
|
+
.item-after
|
33
|
+
span.badge 5
|
34
|
+
li
|
35
|
+
.item-content
|
36
|
+
.item-media
|
37
|
+
i.icon.icon-f7
|
38
|
+
.item-inner
|
39
|
+
.item-title Jenna Smith
|
40
|
+
.content-block-title Links
|
41
|
+
.list-block
|
42
|
+
ul
|
43
|
+
li
|
44
|
+
a(href="#").item-link.item-content
|
45
|
+
.item-media
|
46
|
+
i.icon.icon-f7
|
47
|
+
.item-inner
|
48
|
+
.item-title Ivan Petrov
|
49
|
+
.item-after CEO
|
50
|
+
li
|
51
|
+
a(href="#").item-link.item-content
|
52
|
+
.item-media
|
53
|
+
i.icon.icon-f7
|
54
|
+
.item-inner
|
55
|
+
.item-title John Doe
|
56
|
+
.item-after Cleaner
|
57
|
+
li
|
58
|
+
a(href="#").item-link.item-content
|
59
|
+
.item-media
|
60
|
+
i.icon.icon-f7
|
61
|
+
.item-inner
|
62
|
+
.item-title Jenna Smith
|
63
|
+
.content-block-title Links, no icons
|
64
|
+
.list-block
|
65
|
+
ul
|
66
|
+
li
|
67
|
+
a(href="#").item-link.item-content
|
68
|
+
.item-inner
|
69
|
+
.item-title Ivan Petrov
|
70
|
+
li
|
71
|
+
a(href="#").item-link.item-content
|
72
|
+
.item-inner
|
73
|
+
.item-title John Doe
|
74
|
+
li
|
75
|
+
.item-divider Divider Here
|
76
|
+
li
|
77
|
+
a(href="#").item-link.item-content
|
78
|
+
.item-inner
|
79
|
+
.item-title Ivan Petrov
|
80
|
+
li
|
81
|
+
a(href="#").item-link.item-content
|
82
|
+
.item-inner
|
83
|
+
.item-title Jenna Smith
|
84
|
+
.content-block-title Grouped with sticky titles
|
85
|
+
.list-block
|
86
|
+
.list-group
|
87
|
+
ul
|
88
|
+
li.list-group-title A
|
89
|
+
li
|
90
|
+
.item-content
|
91
|
+
.item-inner
|
92
|
+
.item-title Aaron
|
93
|
+
li
|
94
|
+
.item-content
|
95
|
+
.item-inner
|
96
|
+
.item-title Abbie
|
97
|
+
li
|
98
|
+
.item-content
|
99
|
+
.item-inner
|
100
|
+
.item-title Adam
|
101
|
+
.list-group
|
102
|
+
ul
|
103
|
+
li.list-group-title B
|
104
|
+
li
|
105
|
+
.item-content
|
106
|
+
.item-inner
|
107
|
+
.item-title Bailey
|
108
|
+
li
|
109
|
+
.item-content
|
110
|
+
.item-inner
|
111
|
+
.item-title Barclay
|
112
|
+
li
|
113
|
+
.item-content
|
114
|
+
.item-inner
|
115
|
+
.item-title Bartolo
|
116
|
+
.list-group
|
117
|
+
ul
|
118
|
+
li.list-group-title C
|
119
|
+
li
|
120
|
+
.item-content
|
121
|
+
.item-inner
|
122
|
+
.item-title Caiden
|
123
|
+
li
|
124
|
+
.item-content
|
125
|
+
.item-inner
|
126
|
+
.item-title Calvin
|
127
|
+
li
|
128
|
+
.item-content
|
129
|
+
.item-inner
|
130
|
+
.item-title Candy
|
131
|
+
.content-block-title Mixed and nested
|
132
|
+
.list-block
|
133
|
+
ul
|
134
|
+
li
|
135
|
+
a(href="#").item-link.item-content
|
136
|
+
.item-media
|
137
|
+
i.icon.icon-f7
|
138
|
+
.item-inner
|
139
|
+
.item-title Ivan Petrov
|
140
|
+
.item-after CEO
|
141
|
+
li
|
142
|
+
a(href="#").item-link.item-content
|
143
|
+
.item-media
|
144
|
+
i.icon.icon-f7
|
145
|
+
i.icon.icon-f7
|
146
|
+
.item-inner
|
147
|
+
.item-title Two icons here
|
148
|
+
li
|
149
|
+
.item-content
|
150
|
+
.item-inner
|
151
|
+
.item-title No icons here
|
152
|
+
ul
|
153
|
+
li
|
154
|
+
a(href="#").item-link.item-content
|
155
|
+
.item-media
|
156
|
+
i.icon.icon-f7
|
157
|
+
.item-inner
|
158
|
+
.item-title Ivan Petrov
|
159
|
+
.item-after CEO
|
160
|
+
li
|
161
|
+
a(href="#").item-link.item-content
|
162
|
+
.item-media
|
163
|
+
i.icon.icon-f7
|
164
|
+
i.icon.icon-f7
|
165
|
+
.item-inner
|
166
|
+
.item-title Two icons here
|
167
|
+
li
|
168
|
+
.item-content
|
169
|
+
.item-inner
|
170
|
+
.item-title No icons here
|
171
|
+
li
|
172
|
+
a(href="#").item-link.item-content
|
173
|
+
.item-media
|
174
|
+
i.icon.icon-f7
|
175
|
+
.item-inner
|
176
|
+
.item-title Ultra long text goes here, no, it is really really long
|
177
|
+
li
|
178
|
+
.item-content
|
179
|
+
.item-media
|
180
|
+
i.icon.icon-f7
|
181
|
+
.item-inner
|
182
|
+
.item-title With switch
|
183
|
+
.item-after
|
184
|
+
label.label-switch
|
185
|
+
input(type="checkbox")
|
186
|
+
.checkbox
|
187
|
+
li
|
188
|
+
a(href="#").item-link.item-content
|
189
|
+
.item-media
|
190
|
+
i.icon.icon-f7
|
191
|
+
.item-inner
|
192
|
+
.item-title Ultra long text goes here, no, it is really really long
|
193
|
+
li
|
194
|
+
.item-content
|
195
|
+
.item-media
|
196
|
+
i.icon.icon-f7
|
197
|
+
.item-inner
|
198
|
+
.item-title With switch
|
199
|
+
.item-after
|
200
|
+
label.label-switch
|
201
|
+
input(type="checkbox")
|
202
|
+
.checkbox
|
203
|
+
|
204
|
+
.content-block-title Mixed, inset
|
205
|
+
.list-block.inset
|
206
|
+
ul
|
207
|
+
li
|
208
|
+
a(href="#").item-link.item-content
|
209
|
+
.item-media
|
210
|
+
i.icon.icon-f7
|
211
|
+
.item-inner
|
212
|
+
.item-title Ivan Petrov
|
213
|
+
.item-after CEO
|
214
|
+
li
|
215
|
+
a(href="#").item-link.item-content
|
216
|
+
.item-media
|
217
|
+
i.icon.icon-f7
|
218
|
+
i.icon.icon-f7
|
219
|
+
.item-inner
|
220
|
+
.item-title Two icons here
|
221
|
+
li
|
222
|
+
a(href="#").item-link.item-content
|
223
|
+
.item-media
|
224
|
+
i.icon.icon-f7
|
225
|
+
.item-inner
|
226
|
+
.item-title Ultra long text goes here, no, it is really really long
|
227
|
+
li
|
228
|
+
.item-content
|
229
|
+
.item-media
|
230
|
+
i.icon.icon-f7
|
231
|
+
.item-inner
|
232
|
+
.item-title With switch
|
233
|
+
.item-after
|
234
|
+
label.label-switch
|
235
|
+
input(type="checkbox")
|
236
|
+
.checkbox
|
237
|
+
|
238
|
+
.list-block-label
|
239
|
+
p Here comes some useful information about list above
|
240
|
+
.content-block-title Tablet inset
|
241
|
+
.list-block.tablet-inset
|
242
|
+
ul
|
243
|
+
li
|
244
|
+
a(href="#").item-link.item-content
|
245
|
+
.item-media
|
246
|
+
i.icon.icon-f7
|
247
|
+
.item-inner
|
248
|
+
.item-title Ivan Petrov
|
249
|
+
.item-after CEO
|
250
|
+
li
|
251
|
+
a(href="#").item-link.item-content
|
252
|
+
.item-media
|
253
|
+
i.icon.icon-f7
|
254
|
+
i.icon.icon-f7
|
255
|
+
.item-inner
|
256
|
+
.item-title Two icons here
|
257
|
+
li
|
258
|
+
a(href="#").item-link.item-content
|
259
|
+
.item-media
|
260
|
+
i.icon.icon-f7
|
261
|
+
.item-inner
|
262
|
+
.item-title Ultra long text goes here, no, it is really really long
|
263
|
+
.list-block-label
|
264
|
+
p This list block will look like "inset" only on tablets (iPad)
|
265
|
+
|
266
|
+
|
@@ -0,0 +1,22 @@
|
|
1
|
+
.pages.navbar-through
|
2
|
+
.page(data-page="login-screen-embedded").no-toolbar.no-navbar.no-swipeback
|
3
|
+
.page-content.login-screen-content
|
4
|
+
.login-screen-title Framework7
|
5
|
+
form
|
6
|
+
.list-block
|
7
|
+
ul
|
8
|
+
li.item-content
|
9
|
+
.item-inner
|
10
|
+
.item-title.label Username
|
11
|
+
.item-input
|
12
|
+
input(type="text", name="username", placeholder="Your username")
|
13
|
+
li.item-content
|
14
|
+
.item-inner
|
15
|
+
.item-title.label Password
|
16
|
+
.item-input
|
17
|
+
input(type="password", name="password", placeholder="Your password")
|
18
|
+
.list-block
|
19
|
+
ul
|
20
|
+
li
|
21
|
+
a(href="#").item-link.list-button Sign In
|
22
|
+
.list-block-label Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
@@ -0,0 +1,20 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Login Screen
|
8
|
+
.right
|
9
|
+
a(href="#").link.open-panel.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="login-screen")
|
13
|
+
.page-content
|
14
|
+
.content-block
|
15
|
+
p Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:
|
16
|
+
.content-block.row
|
17
|
+
.col-50
|
18
|
+
a(href="login-screen-embedded.html").button Embedded Into Page
|
19
|
+
.col-50
|
20
|
+
a(href="#").button.open-login-screen As Overlay
|
@@ -0,0 +1,170 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Media Lists
|
8
|
+
.right
|
9
|
+
a(href="#").open-panel.link.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="media-lists")
|
13
|
+
.page-content
|
14
|
+
.content-block
|
15
|
+
p Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc. You can even use them in
|
16
|
+
a(href="#", data-popover=".popover-music").open-popover popovers
|
17
|
+
.content-block-title Songs
|
18
|
+
.list-block.media-list
|
19
|
+
ul
|
20
|
+
li
|
21
|
+
a(href="#").item-link.item-content
|
22
|
+
.item-media
|
23
|
+
img(src="http://hhhhold.com/160/d/jpg?1", width="80")
|
24
|
+
.item-inner
|
25
|
+
.item-title-row
|
26
|
+
.item-title Yellow Submarine
|
27
|
+
.item-after $15
|
28
|
+
.item-subtitle Beatles
|
29
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
30
|
+
li
|
31
|
+
a(href="#").item-link.item-content
|
32
|
+
.item-media
|
33
|
+
img(src="http://hhhhold.com/160/d/jpg?2", width="80")
|
34
|
+
.item-inner
|
35
|
+
.item-title-row
|
36
|
+
.item-title Don't Stop Me Now
|
37
|
+
.item-after $22
|
38
|
+
.item-subtitle Queen
|
39
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
40
|
+
li
|
41
|
+
a(href="#").item-link.item-content
|
42
|
+
.item-media
|
43
|
+
img(src="http://hhhhold.com/160/d/jpg?3", width="80")
|
44
|
+
.item-inner
|
45
|
+
.item-title-row
|
46
|
+
.item-title Billie Jean
|
47
|
+
.item-after $16
|
48
|
+
.item-subtitle Michael Jackson
|
49
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
50
|
+
.content-block-title Mail App (With Swipe to delete and overswipes)
|
51
|
+
.list-block.media-list
|
52
|
+
ul
|
53
|
+
li.swipeout
|
54
|
+
.swipeout-content
|
55
|
+
a(href="#").item-link.item-content
|
56
|
+
.item-inner
|
57
|
+
.item-title-row
|
58
|
+
.item-title Facebook
|
59
|
+
.item-after 17:14
|
60
|
+
.item-subtitle New messages from John Doe
|
61
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
62
|
+
.swipeout-actions-left
|
63
|
+
a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
|
64
|
+
a(href="#").demo-forward.bg-blue Forward
|
65
|
+
.swipeout-actions-right
|
66
|
+
a(href="#").demo-actions More
|
67
|
+
a(href="#").demo-mark.bg-orange Mark
|
68
|
+
a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
|
69
|
+
li.swipeout
|
70
|
+
.swipeout-content
|
71
|
+
a(href="#").item-link.item-content
|
72
|
+
.item-inner
|
73
|
+
.item-title-row
|
74
|
+
.item-title John Doe (via Twitter)
|
75
|
+
.item-after 17:11
|
76
|
+
.item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
|
77
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
78
|
+
.swipeout-actions-left
|
79
|
+
a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
|
80
|
+
a(href="#").demo-forward.bg-blue Forward
|
81
|
+
.swipeout-actions-right
|
82
|
+
a(href="#").demo-actions More
|
83
|
+
a(href="#").demo-mark.bg-orange Mark
|
84
|
+
a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
|
85
|
+
li.swipeout
|
86
|
+
.swipeout-content
|
87
|
+
a(href="#").item-link.item-content
|
88
|
+
.item-inner
|
89
|
+
.item-title-row
|
90
|
+
.item-title Facebook
|
91
|
+
.item-after 16:48
|
92
|
+
.item-subtitle New messages from John Doe
|
93
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
94
|
+
.swipeout-actions-left
|
95
|
+
a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
|
96
|
+
a(href="#").demo-forward.bg-blue Forward
|
97
|
+
.swipeout-actions-right
|
98
|
+
a(href="#").demo-actions More
|
99
|
+
a(href="#").demo-mark.bg-orange Mark
|
100
|
+
a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
|
101
|
+
li.swipeout
|
102
|
+
.swipeout-content
|
103
|
+
a(href="#").item-link.item-content
|
104
|
+
.item-inner
|
105
|
+
.item-title-row
|
106
|
+
.item-title John Doe (via Twitter)
|
107
|
+
.item-after 15:32
|
108
|
+
.item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
|
109
|
+
.item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
|
110
|
+
.swipeout-actions-left
|
111
|
+
a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
|
112
|
+
a(href="#").demo-forward.bg-blue Forward
|
113
|
+
.swipeout-actions-right
|
114
|
+
a(href="#").demo-actions More
|
115
|
+
a(href="#").demo-mark.bg-orange Mark
|
116
|
+
a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
|
117
|
+
.content-block-title Something more simple
|
118
|
+
.list-block.media-list
|
119
|
+
ul
|
120
|
+
li
|
121
|
+
.item-content
|
122
|
+
.item-media
|
123
|
+
img(src="http://hhhhold.com/88/d/jpg?13", width="44")
|
124
|
+
.item-inner
|
125
|
+
.item-title-row
|
126
|
+
.item-title Yellow Submarine
|
127
|
+
.item-subtitle Beatles
|
128
|
+
li
|
129
|
+
a(href="#").item-link.item-content
|
130
|
+
.item-media
|
131
|
+
img(src="http://hhhhold.com/88/d/jpg?23", width="44")
|
132
|
+
.item-inner
|
133
|
+
.item-title-row
|
134
|
+
.item-title Don't Stop Me Now
|
135
|
+
.item-subtitle Queen
|
136
|
+
li
|
137
|
+
.item-content
|
138
|
+
.item-media
|
139
|
+
img(src="http://hhhhold.com/88/d/jpg?33", width="44")
|
140
|
+
.item-inner
|
141
|
+
.item-title-row
|
142
|
+
.item-title Billie Jean
|
143
|
+
.item-subtitle Michael Jackson
|
144
|
+
.content-block-title Inset
|
145
|
+
.list-block.media-list.inset
|
146
|
+
ul
|
147
|
+
li
|
148
|
+
a(href="#").item-link.item-content
|
149
|
+
.item-media
|
150
|
+
img(src="http://hhhhold.com/88/d/jpg?13", width="44")
|
151
|
+
.item-inner
|
152
|
+
.item-title-row
|
153
|
+
.item-title Yellow Submarine
|
154
|
+
.item-subtitle Beatles
|
155
|
+
li
|
156
|
+
a(href="#").item-link.item-content
|
157
|
+
.item-media
|
158
|
+
img(src="http://hhhhold.com/88/d/jpg?23", width="44")
|
159
|
+
.item-inner
|
160
|
+
.item-title-row
|
161
|
+
.item-title Don't Stop Me Now
|
162
|
+
.item-subtitle Queen
|
163
|
+
li
|
164
|
+
a(href="#").item-link.item-content
|
165
|
+
.item-media
|
166
|
+
img(src="http://hhhhold.com/88/d/jpg?33", width="44")
|
167
|
+
.item-inner
|
168
|
+
.item-title-row
|
169
|
+
.item-title Billie Jean
|
170
|
+
.item-subtitle Michael Jackson
|
@@ -0,0 +1,71 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Messages
|
8
|
+
.right
|
9
|
+
a(href="#").link.open-panel.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="messages").no-toolbar.toolbar-fixed
|
13
|
+
.toolbar.messagebar
|
14
|
+
.toolbar-inner
|
15
|
+
a(href="#").link.icon-only
|
16
|
+
i.icon.icon-camera
|
17
|
+
textarea(placeholder="Message")
|
18
|
+
a(href="#").link Send
|
19
|
+
.page-content.messages-content
|
20
|
+
.messages
|
21
|
+
.messages-date Sunday, Feb 9,
|
22
|
+
span 12:58
|
23
|
+
.message.message-sent
|
24
|
+
.message-text Hi, Kate
|
25
|
+
.message.message-sent
|
26
|
+
.message-text How are you?
|
27
|
+
.message.message-received.message-with-avatar
|
28
|
+
.message-name Kate Johnson
|
29
|
+
.message-text Hi, i am good
|
30
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)")
|
31
|
+
.message.message-received.message-with-avatar
|
32
|
+
.message-name Blue Ninja
|
33
|
+
.message-text Hi there, I am also fine, thanks! And how are you?
|
34
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
|
35
|
+
.message.message-sent
|
36
|
+
.message-text Hey, Blue Ninja! Glad to see you ;)
|
37
|
+
.message.message-sent
|
38
|
+
.message-text What do you think about my new logo?
|
39
|
+
.messages-date Wednesday, Feb 12,
|
40
|
+
span 19:33
|
41
|
+
.message.message-sent
|
42
|
+
.message-text Hey? Any thoughts about my new logo?
|
43
|
+
.messages-date Thursday, Feb 13,
|
44
|
+
span 11:20
|
45
|
+
.message.message-sent
|
46
|
+
.message-text Alo...
|
47
|
+
.message.message-sent
|
48
|
+
.message-text Are you there?
|
49
|
+
.message.message-received.message-with-avatar
|
50
|
+
.message-name Blue Ninja
|
51
|
+
.message-text Hi, i am here
|
52
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
|
53
|
+
.message.message-received.message-with-avatar
|
54
|
+
.message-name Blue Ninja
|
55
|
+
.message-text Your logo is great
|
56
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
|
57
|
+
.message.message-received.message-with-avatar
|
58
|
+
.message-name Kate Johnson
|
59
|
+
.message-text Leave me alone!
|
60
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)")
|
61
|
+
.message.message-sent
|
62
|
+
.message-text :(
|
63
|
+
.message.message-sent
|
64
|
+
.message-text Hey, look, cutest kitten ever!
|
65
|
+
.message.message-sent
|
66
|
+
.message-text
|
67
|
+
img(src="http://placekitten.com/g/300/400")
|
68
|
+
.message.message-received.message-with-avatar
|
69
|
+
.message-name Blue Ninja
|
70
|
+
.message-text Yep
|
71
|
+
.message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
|
@@ -0,0 +1,36 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Modals
|
8
|
+
.right
|
9
|
+
a(href="#").link.open-panel.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="modals")
|
13
|
+
.page-content
|
14
|
+
.content-block
|
15
|
+
p There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:
|
16
|
+
.content-block.row
|
17
|
+
.col-33
|
18
|
+
a.button(href="#").demo-alert Alert
|
19
|
+
.col-33
|
20
|
+
a.button(href="#").demo-confirm Confirm
|
21
|
+
.col-33
|
22
|
+
a.button(href="#").demo-prompt Prompt
|
23
|
+
.content-block.row
|
24
|
+
.col-50
|
25
|
+
a.button(href="#").demo-login Login Modal
|
26
|
+
.col-50
|
27
|
+
a.button(href="#").demo-password Password Modal
|
28
|
+
.content-block.row
|
29
|
+
.col-50
|
30
|
+
a.button(href="#").demo-actions Action Sheet
|
31
|
+
.col-50
|
32
|
+
a.button(href="#", data-popup=".demo-popup").open-popup Popup
|
33
|
+
.content-block
|
34
|
+
p Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
|
35
|
+
a.button(href="#", style="display:inline-block; vertical-align:middle").demo-actions-popover Action/Popover
|
36
|
+
|
@@ -0,0 +1,43 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Navbars And Toolbars
|
8
|
+
.right
|
9
|
+
a(href="#").link.open-panel.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="navbars-toolbars")
|
13
|
+
.page-content
|
14
|
+
.list-block
|
15
|
+
ul
|
16
|
+
li
|
17
|
+
a(href="deep-navbar.html").item-link
|
18
|
+
.item-content
|
19
|
+
.item-media
|
20
|
+
i.icon.icon-f7
|
21
|
+
.item-inner
|
22
|
+
.item-title Deep Dynamic Navbar
|
23
|
+
li
|
24
|
+
a(href="hide-navbar-toolbar.html").item-link
|
25
|
+
.item-content
|
26
|
+
.item-media
|
27
|
+
i.icon.icon-f7
|
28
|
+
.item-inner
|
29
|
+
.item-title Hide Navbar & Toolbar
|
30
|
+
li
|
31
|
+
a(href="tabbar.html").item-link
|
32
|
+
.item-content
|
33
|
+
.item-media
|
34
|
+
i.icon.icon-f7
|
35
|
+
.item-inner
|
36
|
+
.item-title Tab Bar
|
37
|
+
li
|
38
|
+
a(href="tabbar-labels.html").item-link
|
39
|
+
.item-content
|
40
|
+
.item-media
|
41
|
+
i.icon.icon-f7
|
42
|
+
.item-inner
|
43
|
+
.item-title Tab Bar With Labels
|
@@ -0,0 +1,7 @@
|
|
1
|
+
.pages.navbar-through
|
2
|
+
.page(data-page="no-navbar-toolbar").no-navbar.no-toolbar
|
3
|
+
.page-content
|
4
|
+
.content-block
|
5
|
+
p On this page Navbar and Toolbar were hidden dynamically. Just add "no-toolbar no-navbar" class to this page to make it work.
|
6
|
+
p
|
7
|
+
a(href="index.html").back.button Go Back
|
@@ -0,0 +1,17 @@
|
|
1
|
+
.navbar
|
2
|
+
.navbar-inner
|
3
|
+
.left.sliding
|
4
|
+
a(href="index.html").back.link
|
5
|
+
i.icon.icon-back
|
6
|
+
span Back
|
7
|
+
.center.sliding Hide Toolbar
|
8
|
+
.right
|
9
|
+
a(href="#").open-panel.link.icon-only
|
10
|
+
i.icon.icon-bars
|
11
|
+
.pages.navbar-through
|
12
|
+
.page(data-page="no-toolbar").no-toolbar
|
13
|
+
.page-content
|
14
|
+
.content-block
|
15
|
+
p On this page Toolbar was hidden dynamically. Just add "no-toolbar" class to this page to make it work.
|
16
|
+
p
|
17
|
+
a(href="index.html").back.button Go Back
|