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.

Page Components

There are following components included:

f7-page - main page element
f7-page-content - additional inner page content element

Page Properties

Prop	Type	Default	Description
<f7-page> properties
name	string		Page name
stacked	boolean		Enable for not currently active page if you use `stackedPages` Router parameter that keeps all pages in DOM
messages-content	boolean		Enable if you use Messages component inside to add required extra styling
page-content	boolean	true	When enabled it automatically adds `page-content` element inside. Usefule to disable 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 theme only)
with-subnavbar	boolean		Enable if you have Sub Navbar inside of the page
no-navbar	boolean		Enable if you use common Navbar layout and need to hide common Navbar (or use another one) for this page (affects iOS theme only)
no-toolbar	boolean		Enable if you use common Toolbar/Tabbar layout and need to hide Toolbar (or use another one) for this page
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
ptr	boolean		Enables Pull To Refresh
ptr-distance	number		Custom pull to refresh trigger distance. By default (if not specified) it is 44px.
ptr-preloader	boolean	true	Disable if you want to use custom pull to refresh preloader element
infinite	boolean		Enables Infinite Scroll
infinite-top	boolean		Enables infinite scroll on top of the page
infinite-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-preloader	boolean	true	Disable if you want to use custom infinite-scroll preloader
<f7-page-content> properties
tab	boolean		Enable if you use page-content as Tab
tab-active	boolean		Enable if the current tab is active
ptr ptr-distance ptr-preloader infinite infinite-top infinite-distance infinite-preloader hide-bars-on-scroll hide-navbar-on-scroll hide-toolbar-on-scroll messages-content login-screen			Same as `<f7-page>` properties

Page Events

Event	Description
<f7-page> events
page:mounted	Event will be triggered when new page just inserted to DOM
page:init	Event will be triggered after Framework7 initialize required page's components and navbar
page:reinit	This event will be triggered in case of navigating to the page that was already initialized.
page:beforein	Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
page:afterin	Event will be triggered after page transitioned into view
page:beforeout	Event will be triggered right before page is going to be transitioned out of view
page:afterout	Event will be triggered after page transitioned out of view
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
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.
<f7-page-content> events
tab:show	Event will be triggered when Tab becomes visible/active
tab:hide	Event will be triggered when Tab becomes hidden/inactive
ptr:pullstart ptr:pullmove ptr:pullend ptr:refresh ptr:done infinite	Same as `<f7-page>` events

Page Slots

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

default - element will be inserted as a child of "page-content", if page-content prop is enabled (by default)
fixed - element will be inserted as a direct child of "page" right before "page-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>

Examples

Minimal layout

<f7-page name="home">
  <p>Page content</p>
</f7-page>

<!-- Renders to: -->

<div class="page" data-name="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-name="home">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">My App</div>
    </div>
  </div>
  <div class="page-content">
    <p>Page content</p>
  </div>
</div>

Pull To Refresh

<f7-page ptr @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 sliding">
      <div class="title">My App</div>
    </div>
  </div>
  <div class="page-content ptr-content">
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
    <p>Page content</p>
  </div>
</div>

Infinite Scroll

<f7-page infinite @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 sliding">
      <div class="title">My App</div>
    </div>
  </div>
  <div class="page-content infinite-scroll-content">
    <p>Page content</p>
    <div class="preloader infinite-scroll-preloader"></div>
  </div>
</div>

Page Content as Tabs

<f7-page tabs :page-content="false">
  <f7-navbar title="My App"></f7-navbar>
  <f7-page-content tab 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 sliding">
      <div class="title">My App</div>
    </div>
  </div>
  <div id="tab-1" class="page-content tab 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>