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 React component represents Framework7's Page.
<Page name="home">
<p>Page content</p>
</Page>
Renders to:
<div class="page" data-page="home">
<div class="page-content">
<p>Page content</p>
</div>
</div>
<Page name="home">
<Navbar title="My App"></Navbar>
<p>Page content</p>
</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>
<Page pullToRefresh onPtrrefresh={onRefresh}>
<Navbar title="My App"></Navbar>
<p>Page content</p>
</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>
<Page infiniteScroll onInfinite={onInfiniteScroll}>
<Navbar title="My App"></Navbar>
<p>Page content</p>
</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>
<Page tabs noPageContent>
<Navbar title="My App"></Navbar>
<PageContent tab active id="tab-1">Tab 1 Content ...</PageContent>
<PageContent tab id="tab-2">Tab 2 Content ...</PageContent>
<PageContent tab id="tab-3">Tab 3 Content ...</PageContent>
</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 React component (<Page>) has additional slots for custom elements:
<Page fixedSlot={<div>Fixed element</div>}>
<p>Page content goes here</p>
</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 | |
noPageContent | 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 | |
loginScreen | boolean | Enable if you use Login Screen inside of the page to add required extra styling | |
noSwipeback | 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 | |||
withSubnavbar | boolean | Enable if you have Sub Navbar inside of the page | |
noNavbar | boolean | Enable if you use Navbar's through-type layout and need to hide Navbar (or use another one) for this page | |
noToolbar | boolean | Enable if you use Toolbar's through-type layout and need to hide Toolbar (or use another one) for this page | |
noTabbar | boolean | Enable if you use Tabbar's through-type layout and need to hide Tabbar (or use another one) for this page | |
navbarFixed | boolean | Enable when you use fixed navbar layout | |
navbarThrough | boolean | Enable when you use through navbar layout | |
toolbarFixed | boolean | Enable when you use fixed toolbar layout | |
toolbarThrough | boolean | Enable when you use through toolbar layout | |
tabbarFixed | boolean | Enable when you use fixed tabbar layout | |
tabbarThrough | boolean | Enable when you use through tabbar layout | |
tabbarLabelsFixed | boolean | Enable when you use fixed tabbar layout | |
tabbarLabelsThrough | boolean | Enable when you use through tabbar layout | |
Hide Bars On Scroll | |||
hideBarsOnScroll | boolean | Hide Navbar & Toolbar on page scroll | |
hideNavbarOnScroll | boolean | Hide Navbar on page scroll | |
hideToolbarOnScroll | boolean | Hide Toolbar on page scroll | |
hideTabbarOnScroll | boolean | Hide Tabbar on page scroll | |
Pull To Refresh | |||
pullToRefresh | boolean | Enables Pull To Refresh | |
pullToRefreshDistance | Number | Custom pull to refresh trigger distance. By default (if not specified) it is 44px. | |
pullToRefreshLayer | boolean | true | Disable if you want to use custom pull to refresh layer (preloader) element |
Infinite Scroll | |||
infiniteScroll | boolean/string | Enables Infinite Scroll (if true). Or pass "top" to enable and use infinite scroll on top | |
infiniteScrollDistance | boolean | true | Distance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px) |
infiniteScrollPreloader | boolean | true | Disable if you want to use custom infinite-scroll preloader |
Event | Description |
---|---|
onPageBeforeinit | Event will be triggered when Framework7 just inserts new page to DOM |
onPageInit | Event will be triggered after Framework7 initialize required page's components and navbar |
onPageReinit | This event will be triggered when cached page becomes visible. It is only applicaple for Inline Pages (DOM cached pages) |
onPageBeforeanimation | Event will be triggered when everything initialized and page (and navbar) is ready to be animated |
onPageAfteranimation | Event will be triggered after page (and navbar) animation |
onPageBeforeremove | 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 |
onPageBack | 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 |
onPageAfterback | 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 |
onPtrPullstart | Event will be triggered when you start to move pull to refresh content |
onPtrPullmove | Event will be triggered during you move pull to refresh content |
onPtrPullend | Event will be triggered when you release pull to refresh content |
onPtrRefresh | Event will be triggered when pull to refresh enters in "refreshing" state |
onPtrDone | Event will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method) |
onInfinite | Event will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom. |