🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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.

Page Components

There are following components included:

Page Properties

PropTypeDefaultDescription
<Page> properties
namestringPage name
messagesContentbooleanEnable if you use Messages component inside to add required extra styling
pageContentbooleantrueWhen enabled it automatically adds page-content element inside. Useful to disable when you need to use few page-content elements for tabs
tabsbooleanEnable if you use Page as Tabs wrapper
loginScreenbooleanEnable if you use Login Screen inside of the page to add required extra styling
noSwipebackbooleanDisables swipeback feature for the current page (affects iOS theme only)
withSubnavbarbooleanEnable if you have Sub Navbar inside of the page
noNavbarbooleanEnable if you use common Navbar layout and need to hide common Navbar (or use another one) for this page (affects iOS theme only)
noToolbarbooleanEnable if you use common Toolbar/Tabbar layout and need to hide Toolbar (or use another one) for this page
hideBarsOnScrollbooleanHide Navbar & Toolbar on page scroll
hideNavbarOnScrollbooleanHide Navbar on page scroll
hideToolbarOnScrollbooleanHide Toolbar on page scroll
ptrbooleanEnables Pull To Refresh
ptrDistancenumberCustom pull to refresh trigger distance. By default (if not specified) it is 44px.
ptrPreloaderbooleantrueDisable if you want to use custom pull to refresh preloader element
ptrBottombooleanfalseEnables pull to refresh from bottom
ptrMousewheelbooleanfalseEnables pull to refresh with mousewheel (for desktop apps). Works only for PTR top
infinitebooleanEnables Infinite Scroll
infiniteTopbooleanEnables infinite scroll on top of the page
infiniteDistancenumberDistance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px)
infinitePreloaderbooleantrueDisable if you want to use custom infinite-scroll preloader
<PageContent> properties
tabbooleanEnable if you use page-content as Tab
tabActivebooleanEnable if the current tab is active
ptr
ptrDistance
ptrPreloader
ptrBottom
ptrMousewheel
infinite
infiniteTop
infiniteDistance
infinitePreloader
hideBarsOnScroll
hideNavbarOnScroll
hideToolbarOnScroll
messagesContent
loginScreen
Same as <Page> properties

Page Events

EventDescription
<Page> events
pageMountedEvent will be triggered when page with keepAlive route is mounted/attached to DOM
pageInitEvent will be triggered after Framework7 initialize required page's components and navbar
pageReinitThis event will be triggered in case of navigating to the page that was already initialized.
pageBeforeInEvent will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
pageAfterInEvent will be triggered after page transitioned into view
pageBeforeOutEvent will be triggered right before page is going to be transitioned out of view
pageAfterOutEvent will be triggered after page transitioned out of view
pageBeforeUnmountEvent will be triggered when page with keepAlive route is going to be unmounted/detached from DOM
pageBeforeRemoveEvent 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. This event won't be triggered for keepAlive routes.
pageTabShowEvent will be triggered when page's parent View as Tab becomes visible
pageTabHideEvent will be triggered when page's parent View as Tab becomes hidden
ptrPullStartEvent will be triggered when you start to move pull to refresh content
ptrPullMoveEvent will be triggered during you move pull to refresh content
ptrPullEndEvent will be triggered when you release pull to refresh content
ptrRefreshEvent will be triggered when pull to refresh enters in "refreshing" state
ptrDoneEvent will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method)
infiniteEvent will be triggered when page scroll reaches specified (in data-distance attribute) distance to the bottom.
<PageContent> events
tabShowEvent will be triggered when Tab becomes visible/active
tabHideEvent will be triggered when Tab becomes hidden/inactive
ptrPullStart
ptrPullMove
ptrPullEnd
ptrRefresh
ptrDone
infinite
Same as <Page> events

Page Slots

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

<Page>
  <div slot="fixed">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>

Examples

Infinite Scroll

infinite-scroll.jsx
import React, { useRef, useState } from 'react';
import { Navbar, Page, BlockTitle, List, ListItem } from 'framework7-react';

export default () => {
  const allowInfinite = useRef(true);
  const [items, setItems] = useState([
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  ]);
  const [showPreloader, setShowPreloader] = useState(true);

  const loadMore = () => {
    if (!allowInfinite.current) return;
    allowInfinite.current = false;

    setTimeout(() => {
      if (items.length >= 200) {
        setShowPreloader(false);
        return;
      }

      const itemsLength = items.length;

      for (let i = 1; i <= 20; i += 1) {
        items.push(itemsLength + i);
      }
      allowInfinite.current = true;
      setItems([...items]);
    }, 1000);
  };

  return (
    <Page infinite infiniteDistance={50} infinitePreloader={showPreloader} onInfinite={loadMore}>
      <Navbar title="Infinite Scroll"></Navbar>
      <BlockTitle>Scroll bottom</BlockTitle>
      <List strongIos outlineIos dividersIos>
        {items.map((item, index) => (
          <ListItem title={`Item ${item}`} key={index}></ListItem>
        ))}
      </List>
    </Page>
  );
};

Pull To Refresh

pull-to-refresh.jsx
import React, { useState } from 'react';
import { Navbar, Page, List, ListItem, BlockFooter } from 'framework7-react';

export default () => {
  const songs = ['Yellow Submarine', "Don't Stop Me Now", 'Billie Jean', 'Californication'];
  const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
  const [items, setItems] = useState([
    {
      title: 'Yellow Submarine',
      author: 'Beatles',
      cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
    },
    {
      title: "Don't Stop Me Now",
      author: 'Queen',
      cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
    },
    {
      title: 'Billie Jean',
      author: 'Michael Jackson',
      cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
    },
  ]);
  const loadMore = (done) => {
    setTimeout(() => {
      const picURL = `https://cdn.framework7.io/placeholder/abstract-88x88-${
        Math.floor(Math.random() * 10) + 1
      }.jpg`;
      const song = songs[Math.floor(Math.random() * songs.length)];
      const author = authors[Math.floor(Math.random() * authors.length)];
      items.push({
        title: song,
        author,
        cover: picURL,
      });
      setItems([...items]);

      done();
    }, 1000);
  };
  return (
    <Page ptr ptrMousewheel={true} onPtrRefresh={loadMore}>
      <Navbar title="Pull To Refresh"></Navbar>
      <List mediaList strongIos dividersIos outlineIos>
        {items.map((item, index) => (
          <ListItem key={index} title={item.title} subtitle={item.author}>
            <img slot="media" src={item.cover} width="44" style={{ borderRadius: '8px' }} />
          </ListItem>
        ))}
        <BlockFooter>
          <p>
            Just pull page down to let the magic happen.
            <br />
            Note that pull-to-refresh feature is optimised for touch and native scrolling so it may
            not work on desktop browser.
          </p>
        </BlockFooter>
      </List>
    </Page>
  );
};