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 / F7Page - main page element
    • PageContent / F7PageContent - additional inner page content element

    Page Properties

    Prop Type Default Description
    <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
    messagesContent boolean Enable if you use Messages component inside to add required extra styling
    pageContent 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
    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 theme only)
    withSubnavbar boolean Enable if you have Sub Navbar inside of the page
    noNavbar 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)
    noToolbar boolean Enable if you use common Toolbar/Tabbar layout and need to hide Toolbar (or use another one) for this page
    hideBarsOnScroll boolean Hide Navbar & Toolbar on page scroll
    hideNavbarOnScroll boolean Hide Navbar on page scroll
    hideToolbarOnScroll boolean Hide Toolbar on page scroll
    ptr boolean Enables Pull To Refresh
    ptrDistance number Custom pull to refresh trigger distance. By default (if not specified) it is 44px.
    ptrPreloader boolean true Disable if you want to use custom pull to refresh preloader element
    infinite boolean Enables Infinite Scroll
    infiniteTop boolean Enables infinite scroll on top of the page
    infiniteDistance boolean true Distance from the bottom of page (in px) to trigger infinite scroll event. By default (if not specified), it is 50 (px)
    infinitePreloader boolean true Disable if you want to use custom infinite-scroll preloader
    <PageContent> properties
    tab boolean Enable if you use page-content as Tab
    tabActive boolean Enable if the current tab is active
    ptr
    ptrDistance
    ptrPreloader
    infinite
    infiniteTop
    infiniteDistance
    infinitePreloader
    hideBarsOnScroll
    hideNavbarOnScroll
    hideToolbarOnScroll
    messagesContent
    loginScreen
    Same as <Page> properties

    Page Events

    Event Description
    <Page> events
    pageMounted Event will be triggered when new page just inserted to DOM
    pageInit Event will be triggered after Framework7 initialize required page's components and navbar
    pageReinit This event will be triggered in case of navigating to the page that was already initialized.
    pageBeforeIn Event will be triggered when everything initialized and page is ready to be transitioned into view (into active/current position)
    pageAfterIn Event will be triggered after page transitioned into view
    pageBeforeOut Event will be triggered right before page is going to be transitioned out of view
    pageAfterOut Event will be triggered after page transitioned out of view
    pageBeforeRemove 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
    ptrPullStart Event will be triggered when you start to move pull to refresh content
    ptrPullMove Event will be triggered during you move pull to refresh content
    ptrPullEnd Event will be triggered when you release pull to refresh content
    ptrRefresh Event will be triggered when pull to refresh enters in "refreshing" state
    ptrDone 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.
    <PageContent> events
    tabShow Event will be triggered when Tab becomes visible/active
    tabHide Event will be triggered when Tab becomes hidden/inactive
    ptrPullStart
    ptrPullMove
    ptrPullEnd
    ptrEefresh
    ptrDone
    infinite
    Same as <Page> events

    Page Slots

    Page React component (<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"
    <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

    export default class extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
          allowInfinite: true,
          showPreloader: true,
        };
      }
      render() {
        return (
          <Page
            infinite
            infiniteDistance={50}
            infinitePreloader={this.state.showPreloader}
            onInfinite={this.loadMore.bind(this)}
          >
            <Navbar title="Infinite Scroll"></Navbar>
            <BlockTitle>Scroll bottom</BlockTitle>
            <List>
              {this.state.items.map((item, index) => (
                <ListItem title={`Item ${item}`} key={index}></ListItem>
              ))}
            </List>
          </Page>
        )
      }
      loadMore() {
        const self = this;
        if (!self.state.allowInfinite) return;
        self.setState({ allowInfinite: false });
    
        setTimeout(() => {
          const items = self.state.items;
          if (items.length >= 200) {
            self.setState({ showPreloader: false });
            return;
          }
    
          const itemsLength = items.length;
    
          for (let i = 1; i <= 20; i += 1) {
            items.push(itemsLength + i);
          }
    
          self.setState({
            items,
            allowInfinite: true,
          });
        }, 1000);
      }
    };

    Pull To Refresh

    export default class extends React.Component {
      constructor(props) {
        super(props);
    
        this.state = {
          items: [
            {
              title: 'Yellow Submarine',
              author: 'Beatles',
              cover: 'http://lorempixel.com/88/88/abstract/1',
            },
            {
              title: 'Don\'t Stop Me Now',
              author: 'Queen',
              cover: 'http://lorempixel.com/88/88/abstract/2',
            },
            {
              title: 'Billie Jean',
              author: 'Michael Jackson',
              cover: 'http://lorempixel.com/88/88/abstract/3',
            },
          ],
          songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
          authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
        }
      }
      render() {
        return (
          <Page ptr onPtrRefresh={this.loadMore.bind(this)}>
            <Navbar title="Pull To Refresh"></Navbar>
            <List mediaList>
              {this.state.items.map((item, index) => (
                <ListItem
                  key={index}
                  title={item.title}
                  subtitle={item.author}
                >
                  <img slot="media" src={item.cover} width="44" />
                </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>
        );
      }
      loadMore(event, done) {
        const self = this;
        setTimeout(() => {
          const { items, songs, authors } = self.state;
          const picURL = `http://lorempixel.com/88/88/abstract/${Math.round(Math.random() * 10)}`;
          const song = songs[Math.floor(Math.random() * songs.length)];
          const author = authors[Math.floor(Math.random() * authors.length)];
          items.push({
            title: song,
            author,
            img: picURL,
          });
          self.setState({ items });
    
          done();
        }, 1000);
      }
    }