Language: ENCN

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.