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.
There are following components included:
PageContent
/F7PageContent
- additional inner page content element
Event | Description |
---|---|
<Page> events | |
pageMounted | Event will be triggered when page with keepAlive route is mounted/attached 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 |
pageBeforeUnmount | Event will be triggered when page with keepAlive route is going to be unmounted/detached from DOM |
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. This event won’t be triggered for keepAlive routes. |
pageTabShow | Event will be triggered when page’s parent View as Tab becomes visible |
pageTabHide | Event will be triggered when page’s parent becomes hidden |
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 events |
default
- element will be inserted as a child of “page-content”, ifpage-content
prop is enabled (by default)fixed
- element will be inserted as a direct child of “page” right before “page-content”