framework7rails 3.0.0 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/lib/framework7rails/version.rb +2 -2
- data/update_from_vendor.rb +1 -1
- data/vendor/assets/javascripts/framework7.js +5806 -2303
- data/vendor/assets/javascripts/framework7.js.map +1 -1
- data/vendor/assets/stylesheets/framework7.css +2164 -464
- data/vendor/assets/stylesheets/framework7.themes.css +189 -25
- metadata +2 -205
- data/Framework7-0.9.6/.gitignore +0 -5
- data/Framework7-0.9.6/.jshintrc +0 -33
- data/Framework7-0.9.6/.travis.yml +0 -5
- data/Framework7-0.9.6/CHANGELOG.md +0 -342
- data/Framework7-0.9.6/Gruntfile.js +0 -560
- data/Framework7-0.9.6/LICENSE +0 -20
- data/Framework7-0.9.6/README.md +0 -113
- data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
- 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 +0 -112
- data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
- data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
- data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
- data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
- data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
- 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 +0 -127
- data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
- data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
- data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
- data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
- data/Framework7-0.9.6/bower.json +0 -30
- data/Framework7-0.9.6/dist/about.html +0 -28
- data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
- data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
- data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
- data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
- data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
- data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
- data/Framework7-0.9.6/dist/css/my-app.css +0 -0
- data/Framework7-0.9.6/dist/form.html +0 -229
- 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 +0 -102
- data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
- data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
- data/Framework7-0.9.6/dist/js/my-app.js +0 -48
- data/Framework7-0.9.6/dist/services.html +0 -28
- data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
- data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
- data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
- data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
- data/Framework7-0.9.6/examples/split-view/about.html +0 -19
- data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
- data/Framework7-0.9.6/examples/split-view/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
- data/Framework7-0.9.6/examples/split-view/services.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
- data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
- data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
- data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
- data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
- data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
- data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
- data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
- data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
- data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
- data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
- data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
- data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
- data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
- data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
- data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
- data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
- 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 +0 -466
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
- data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
- data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
- data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
- data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
- data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
- data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
- data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
- data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
- data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
- data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
- data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
- data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
- data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
- data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
- data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
- data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
- data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
- data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
- data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
- data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
- data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
- data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
- data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
- data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
- data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
- data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
- data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
- data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
- data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
- data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
- data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
- data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
- data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
- data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
- data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
- data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
- data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
- data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
- data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
- data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
- data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,71 +0,0 @@
|
|
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)")
|
@@ -1,36 +0,0 @@
|
|
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
|
-
|
@@ -1,43 +0,0 @@
|
|
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
|
@@ -1,7 +0,0 @@
|
|
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
|
@@ -1,17 +0,0 @@
|
|
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
|
@@ -1,23 +0,0 @@
|
|
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 Notifications
|
8
|
-
.right
|
9
|
-
a(href="#").open-panel.link.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="notifications")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Framework7 comes with simple Notifications component that allows you to show some useful messages to user.
|
16
|
-
p
|
17
|
-
a(href="#").button.ks-notification-simple Default notification
|
18
|
-
p
|
19
|
-
a(href="#").button.ks-notification-full Full-layout notification
|
20
|
-
p
|
21
|
-
a(href="#").button.ks-notification-custom With custom image
|
22
|
-
p
|
23
|
-
a(href="#").button.ks-notification-callback With callback on close
|
@@ -1,21 +0,0 @@
|
|
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 Side Panels
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="panels")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - <b>cover</b> above the content (like left panel here) and <b>reveal</b> (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels:
|
16
|
-
.content-block
|
17
|
-
.row
|
18
|
-
.col-50
|
19
|
-
a(href="#").button.open-panel Left Panel
|
20
|
-
.col-50
|
21
|
-
a(href="#", data-panel="right").button.open-panel Right Panel
|
@@ -1,36 +0,0 @@
|
|
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 Photo Browser
|
8
|
-
.right
|
9
|
-
a(href="#").open-panel.link.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="photo-browser")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:
|
16
|
-
ul
|
17
|
-
li Swiper between photos
|
18
|
-
li Multi-gestures support for zooming
|
19
|
-
li Toggle zoom by double tap on photo
|
20
|
-
li Single click on photo to toggle Exposition mode
|
21
|
-
p Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:
|
22
|
-
.row
|
23
|
-
.col-33
|
24
|
-
a(href="#").button.ks-pb-standalone Standalone
|
25
|
-
.col-33
|
26
|
-
a(href="#").button.ks-pb-popup Popup
|
27
|
-
.col-33
|
28
|
-
a(href="#").button.ks-pb-page Page
|
29
|
-
.content-block
|
30
|
-
p For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:
|
31
|
-
.row
|
32
|
-
.col-50
|
33
|
-
a(href="#").button.ks-pb-standalone-dark Standalone
|
34
|
-
.col-50
|
35
|
-
a(href="#").button.ks-pb-popup-dark Popup
|
36
|
-
|
@@ -1,21 +0,0 @@
|
|
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 Popover
|
8
|
-
.right
|
9
|
-
a(href="#", data-popover=".popover-menu").open-popover.link.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="popover")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Of course, Framework7 has Popovers. Popovers may be called on absolutely any element with dynamic positioning. Note that due to Apple guide lines it is not recommended to use popovers on iPhone, only on bigger screens (iPad), so on small screen it may have wrong positioning because it is not fit to screen. For iPhone it is recommended to use <a href="modals.html">actions and modals</a> instead. Try the "bars" icon on navbar, "menu" link on bottom toolbar, links and buttons in text below:
|
16
|
-
p
|
17
|
-
a(href="#", data-popover=".popover-menu").button.open-popover Open popover on me
|
18
|
-
p Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a href="#" class="open-popover" data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.
|
19
|
-
p In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <a href="#" class="open-popover" data-popover=".popover-menu">popover!</a> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.
|
20
|
-
p Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <a href="#" class="open-popover" data-popover=".popover-menu">one more popover</a> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.
|
21
|
-
|
@@ -1,31 +0,0 @@
|
|
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 Preloader
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="preloader")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for a light background and another on a dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .dark class. Here are some examples:
|
16
|
-
.content-block.row.ks-preloaders
|
17
|
-
.col-25 Default:<br>
|
18
|
-
span.preloader
|
19
|
-
.col-25(style="background-color: #333;") Dark:<br>
|
20
|
-
span.preloader.preloader-white
|
21
|
-
.col-25 Big:<br>
|
22
|
-
span.preloader.ks-preloader-big
|
23
|
-
.col-25(style="background-color: #333;") Dark:<br>
|
24
|
-
span.preloader.preloader-white.ks-preloader-big
|
25
|
-
.content-block
|
26
|
-
p With <b>app.showIndicator()</b> you can call small overlay with indicator:
|
27
|
-
a(href="#").button.demo-indicator Open small indicator overlay
|
28
|
-
p With <b>app.showPreloader()</b> you can call modal window with preloader:
|
29
|
-
a(href="#").button.demo-preloader Open preloader modal
|
30
|
-
p With <b>app.showPreloader('My text...')</b> you can call it with custom title:
|
31
|
-
a(href="#").button.demo-preloader-custom Open custom preloader
|
@@ -1,44 +0,0 @@
|
|
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 Pull To Refresh
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="pull-to-refresh")
|
13
|
-
.page-content.pull-to-refresh-content
|
14
|
-
.pull-to-refresh-layer
|
15
|
-
.preloader
|
16
|
-
.pull-to-refresh-arrow
|
17
|
-
.list-block.media-list
|
18
|
-
ul
|
19
|
-
li.item-content
|
20
|
-
.item-media
|
21
|
-
img(src="http://hhhhold.com/88/d/jpg?1", width="44")
|
22
|
-
.item-inner
|
23
|
-
.item-title-row
|
24
|
-
.item-title Yellow Submarine
|
25
|
-
.item-subtitle Beatles
|
26
|
-
li.item-content
|
27
|
-
.item-media
|
28
|
-
img(src="http://hhhhold.com/88/d/jpg?2", width="44")
|
29
|
-
.item-inner
|
30
|
-
.item-title-row
|
31
|
-
.item-title Don't Stop Me Now
|
32
|
-
.item-subtitle Queen
|
33
|
-
li.item-content
|
34
|
-
.item-media
|
35
|
-
img(src="http://hhhhold.com/88/d/jpg?3", width="44")
|
36
|
-
.item-inner
|
37
|
-
.item-title-row
|
38
|
-
.item-title Billie Jean
|
39
|
-
.item-subtitle Michael Jackson
|
40
|
-
.list-block-label
|
41
|
-
p Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native iOS scrolling so it may not work on desktop browser.
|
42
|
-
|
43
|
-
|
44
|
-
|
@@ -1,146 +0,0 @@
|
|
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 Search Bar
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="searchbar")
|
13
|
-
form.searchbar(data-search-list=".search-here", data-search-in=".item-title")
|
14
|
-
.searchbar-input
|
15
|
-
input(type="search", placeholder="Search")
|
16
|
-
a(href="#").searchbar-clear
|
17
|
-
a(href="#").searchbar-cancel Cancel
|
18
|
-
.searchbar-overlay
|
19
|
-
.page-content
|
20
|
-
.list-block.searchbar-not-found
|
21
|
-
ul
|
22
|
-
li.item-content
|
23
|
-
.item-inner
|
24
|
-
.item-title Nothing found
|
25
|
-
.list-block.search-here.searchbar-found
|
26
|
-
ul
|
27
|
-
li.item-content
|
28
|
-
.item-inner
|
29
|
-
.item-title Acura
|
30
|
-
li.item-content
|
31
|
-
.item-inner
|
32
|
-
.item-title Audi
|
33
|
-
li.item-content
|
34
|
-
.item-inner
|
35
|
-
.item-title BMW
|
36
|
-
li.item-content
|
37
|
-
.item-inner
|
38
|
-
.item-title Cadillac
|
39
|
-
li.item-content
|
40
|
-
.item-inner
|
41
|
-
.item-title Chevrolet
|
42
|
-
li.item-content
|
43
|
-
.item-inner
|
44
|
-
.item-title Chrysler
|
45
|
-
li.item-content
|
46
|
-
.item-inner
|
47
|
-
.item-title Dodge
|
48
|
-
li.item-content
|
49
|
-
.item-inner
|
50
|
-
.item-title Ferrari
|
51
|
-
li.item-content
|
52
|
-
.item-inner
|
53
|
-
.item-title Ford
|
54
|
-
li.item-content
|
55
|
-
.item-inner
|
56
|
-
.item-title GMC
|
57
|
-
li.item-content
|
58
|
-
.item-inner
|
59
|
-
.item-title Honda
|
60
|
-
li.item-content
|
61
|
-
.item-inner
|
62
|
-
.item-title Hummer
|
63
|
-
li.item-content
|
64
|
-
.item-inner
|
65
|
-
.item-title Hyundai
|
66
|
-
li.item-content
|
67
|
-
.item-inner
|
68
|
-
.item-title Infiniti
|
69
|
-
li.item-content
|
70
|
-
.item-inner
|
71
|
-
.item-title Isuzu
|
72
|
-
li.item-content
|
73
|
-
.item-inner
|
74
|
-
.item-title Jaguar
|
75
|
-
li.item-content
|
76
|
-
.item-inner
|
77
|
-
.item-title Jeep
|
78
|
-
li.item-content
|
79
|
-
.item-inner
|
80
|
-
.item-title Kia
|
81
|
-
li.item-content
|
82
|
-
.item-inner
|
83
|
-
.item-title Lamborghini
|
84
|
-
li.item-content
|
85
|
-
.item-inner
|
86
|
-
.item-title Land Rover
|
87
|
-
li.item-content
|
88
|
-
.item-inner
|
89
|
-
.item-title Lexus
|
90
|
-
li.item-content
|
91
|
-
.item-inner
|
92
|
-
.item-title Lincoln
|
93
|
-
li.item-content
|
94
|
-
.item-inner
|
95
|
-
.item-title Lotus
|
96
|
-
li.item-content
|
97
|
-
.item-inner
|
98
|
-
.item-title Mazda
|
99
|
-
li.item-content
|
100
|
-
.item-inner
|
101
|
-
.item-title Mercedes-Benz
|
102
|
-
li.item-content
|
103
|
-
.item-inner
|
104
|
-
.item-title Mercury
|
105
|
-
li.item-content
|
106
|
-
.item-inner
|
107
|
-
.item-title Mitsubishi
|
108
|
-
li.item-content
|
109
|
-
.item-inner
|
110
|
-
.item-title Nissan
|
111
|
-
li.item-content
|
112
|
-
.item-inner
|
113
|
-
.item-title Oldsmobile
|
114
|
-
li.item-content
|
115
|
-
.item-inner
|
116
|
-
.item-title Peugeot
|
117
|
-
li.item-content
|
118
|
-
.item-inner
|
119
|
-
.item-title Pontiac
|
120
|
-
li.item-content
|
121
|
-
.item-inner
|
122
|
-
.item-title Porsche
|
123
|
-
li.item-content
|
124
|
-
.item-inner
|
125
|
-
.item-title Regal
|
126
|
-
li.item-content
|
127
|
-
.item-inner
|
128
|
-
.item-title Saab
|
129
|
-
li.item-content
|
130
|
-
.item-inner
|
131
|
-
.item-title Saturn
|
132
|
-
li.item-content
|
133
|
-
.item-inner
|
134
|
-
.item-title Subaru
|
135
|
-
li.item-content
|
136
|
-
.item-inner
|
137
|
-
.item-title Suzuki
|
138
|
-
li.item-content
|
139
|
-
.item-inner
|
140
|
-
.item-title Toyota
|
141
|
-
li.item-content
|
142
|
-
.item-inner
|
143
|
-
.item-title Volkswagen
|
144
|
-
li.item-content
|
145
|
-
.item-inner
|
146
|
-
.item-title Volvo
|