Page in Framework7 has the same meaning as when you think about web pages. Page is the main component to display and operate content.
Page Vue component represents Framework7's Page.
<f7-page name="home">
<p>Page content</p>
</f7-page>
Renders to:
<div class="page" data-page="home">
<div class="page-content">
<p>Page content</p>
</div>
</div>
<f7-page name="home">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page" data-page="home">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content">
<p>Page content</p>
</div>
</div>
<f7-page pull-to-refresh @ptr:refresh="onRefresh">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<p>Page content</p>
</div>
</div>
<f7-page infinite-scroll @infinite="onInfiniteScroll">
<f7-navbar title="My App"></f7-navbar>
<p>Page content</p>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div class="page-content infinite-scroll">
<p>Page content</p>
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
</div>
<f7-page tabs no-page-content>
<f7-navbar title="My App"></f7-navbar>
<f7-page-content tab active id="tab-1">Tab 1 Content ...</f7-page-content>
<f7-page-content tab id="tab-2">Tab 2 Content ...</f7-page-content>
<f7-page-content tab id="tab-3">Tab 3 Content ...</f7-page-content>
</f7-page>
Renders to:
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="center">My App</div>
</div>
</div>
<div id="tab-1" class="page-content tab active">
Tab 1 Content ...
</div>
<div id="tab-2" class="page-content tab">
Tab 2 Content ...
</div>
<div id="tab-3" class="page-content tab">
Tab 3 Content ...
</div>
</div>
Page Vue component (<f7-page>) has additional slots for custom elements:
<f7-page>
<div slot="fixed">Fixed element</div>
<p>Page content goes here</p>
</f7-page>
Renders to:
<div class="page">
<div>Fixed element</div>
<div class="page-content">
<p>Page content goes here</p>
</div>
</div>
Prop | Type | Default | Description |
---|---|---|---|
name | string | Page name | |
cached | boolean | Enable if you use domCache and Inline Pages Navigation | |
messages | boolean | Enable if you use Messages component inside to add required extra styling | |
no-page-content | boolean | Enable to disable automatically added page-content element inside (e.g. when you need to use few page-content elements for tabs) | |
tabs | boolean | Enable if you use Page as Tabs wrapper | |
login-screen | boolean | Enable if you use Login Screen inside of the page to add required extra styling | |
no-swipeback | boolean | Disables swipeback feature for the current page (affects iOS only) | |
theme | string | Page theme color. One of default colors | |
layout | string | Page layout theme. One of default layout themes | |
Navbar & Toolbars layout | |||
with-subnavbar | boolean | Enable if you have Sub Navbar inside of the page | |
no-navbar | boolean | Enable if you use Navbar's through-type layout and need to hide Navbar (or use another one) for this page | |
no-toolbar | boolean | Enable if you use Toolbar's through-type layout and need to hide Toolbar (or use another one) for this page | |
no-tabbar | boolean | Enable if you use Tabbar's through-type layout and need to hide Tabbar (or use another one) for this page | |
navbar-fixed | boolean | Enable when you use fixed navbar layout | |
navbar-through | boolean | Enable when you use through navbar layout | |
toolbar-fixed | boolean | Enable when you use fixed toolbar layout | |
toolbar-through | boolean | Enable when you use through toolbar layout | |
tabbar-fixed | boolean | Enable when you use fixed tabbar layout | |
tabbar-through | boolean | Enable when you use through tabbar layout | |
tabbar-labels-fixed | boolean | Enable when you use fixed tabbar layout | |
tabbar-labels-through | boolean | Enable when you use through tabbar layout | |
Hide Bars On Scroll | |||
hide-bars-on-scroll | boolean | Hide Navbar & Toolbar on page scroll | |
hide-navbar-on-scroll | boolean | Hide Navbar on page scroll | |
hide-toolbar-on-scroll | boolean | Hide Toolbar on page scroll | |
hide-tabbar-on-scroll | boolean | Hide Tabbar on page scroll | |
Pull To Refresh | |||
pull-to-refresh | boolean | Enables Pull To Refresh | |
pull-to-refresh-distance | Number | Custom pull to refresh trigger distance. By default (if not specified) it is 44px. | |
pull-to-refresh-layer | boolean | true | Disable if you want to use custom pull to refresh layer (preloader) element |
Infinite Scroll | |||
infinite-scroll | boolean/string | Enables Infinite Scroll (if true). Or pass "top" to enable and use infinite scroll on top | |
infinite-scroll-distance | boolean | true | Distance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px) |
infinite-scroll-preloader | boolean | true | Disable if you want to use custom infinite-scroll preloader |
Event | Description |
---|---|
page:beforeinit | Event will be triggered when Framework7 just inserts new page to DOM |
page:init | Event will be triggered after Framework7 initialize required page's components and navbar |
page:reinit | This event will be triggered when cached page becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
page:beforeanimation | Event will be triggered when everything initialized and page (and navbar) is ready to be animated |
page:afteranimation | Event will be triggered after page (and navbar) animation |
page:beforeremove | Event will be triggered right before Page will be removed from DOM. This event could be very useful if you need to detach some events / destroy some plugins to free memory |
page:back | Event will be triggered right before "back" transition. Difference with "pageBeforeAnimation" is that this event will be triggered for the "old" page - page that slides from center to right |
page:afterback | Event will be triggered right after "back" transition. Difference with "pageAfterAnimation" is that this event will be triggered for the "old" page - page that slides from center to right |
ptr:pullstart | Event will be triggered when you start to move pull to refresh content |
ptr:pullmove | Event will be triggered during you move pull to refresh content |
ptr:pullend | Event will be triggered when you release pull to refresh content |
ptr:refresh | Event will be triggered when pull to refresh enters in "refreshing" state |
ptr:done | Event will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method) |
infinite | Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom. |