Page Vue 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 Vue component represents Framework7's Page.

Usage examples

Minimal layout

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

With Navbar

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

Pull To Refresh

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

Infinite Scroll

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

Page Content as Tabs

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

Slots

Page Vue component (<f7-page>) has additional slots for custom elements:

• static/default - element will be inserted right in the beginning of "page-content"
• fixed - element will be inserted right in the beginning of "page" before "before-content"

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

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

Events

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.