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 elementPageContent
/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 |
ptrBottom | boolean | false | Enables pull to refresh from bottom |
ptrMousewheel | boolean | false | Enables pull to refresh with mousewheel (for desktop apps). Works only for PTR top |
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 ptrBottom ptrMousewheel 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 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 View as Tab 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 <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”, ifpage-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: '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',
},
],
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(done) {
const self = this;
setTimeout(() => {
const { items, songs, authors } = self.state;
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,
});
self.setState({ items });
done();
}, 1000);
}
}
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .