framework7.angular
Version:
Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs
106 lines (103 loc) • 4.17 kB
text/jade
doctype
html
head
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
meta(name='apple-mobile-web-app-capable', content='yes')
meta(name="apple-mobile-web-app-status-bar-style", content="black")
title My App
// Path to Framework7 Library CSS
link(rel="stylesheet", href="../../dist/css/framework7.ios.min.css")
// Path to your custom app styles
link(rel="stylesheet", href="css/my-app.css")
body
// Status bar overlay for fullscreen mode
.statusbar-overlay
// Panels overlay
.panel-overlay
// Left panel with reveal effect
.panel.panel-left.panel-cover
// Left view
.view.view-left.navbar-through
.navbar
.navbar-inner
.left
.center.sliding Left View
.right
.pages
.page(data-page="index-left")
.page-content
.content-block-title Left View Links
.list-block
ul
li
a(href="left-page-1.html").item-link
.item-content
.item-inner
.item-title Left Page 1
li
a(href="left-page-2.html").item-link
.item-content
.item-inner
.item-title Left Page 2
.content-block-title Control Main View
.list-block
ul
li
a(href="about.html", data-view=".view-main").item-link.close-panel
.item-content
.item-inner
.item-title About
li
a(href="services.html", data-view=".view-main").item-link.close-panel
.item-content
.item-inner
.item-title Services
li
a(href="#", data-view=".view-main").back.item-link.close-panel
.item-content
.item-inner
.item-title Back in history
// Right panel with cover effect
.panel.panel-right.panel-reveal
.content-block
p Right panel content goes here
// Views
.views
// Right view, it is main view
.view.view-main.navbar-through
.navbar
.navbar-inner
.center.sliding Main View
.right
a(href="#", data-panel="left").link.open-panel.icon-only
i.icon.icon-bars
// Pages
.pages
// Page, data-page contains page name
.page(data-page="index-1")
// Scrollable page content
.page-content
.content-block-title Hello
.content-block
.content-block-inner
p This is an example of split view application layout where left view degrades to panel on narrow screens (iPad portrait and iPhone). It behaves like default Mail app on iOS 7.
p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar. You can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
p Additional right panel is also available:
a(href="#", data-panel="right").open-panel right panel
.list-block
ul
li
a(href="about.html").item-link
.item-content
.item-inner
.item-title About
li
a(href="services.html").item-link
.item-content
.item-inner
.item-title Services
// Path to Framework7 Library JS
script(type="text/javascript", src="../../dist/js/framework7.min.js")
// Path to your app js
script(type="text/javascript", src="js/my-app.js")