Page React Component

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.

Usage examples

Minimal layout

<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>

With Navbar

<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>

Pull To Refresh

<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>

Infinite Scroll

<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 Content as Tabs

<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>

Slot Properties

Page React component (<Page>) has additional slots for custom elements:

  • fixed - element will be inserted right in the beginning of "page" before "before-content"
<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>

Properties

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 Properties

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.