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

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”

1. <Page>
2. <div slot="fixed">Fixed element</div>
3. <p>Page content goes here</p>
4. </Page>

6. {/* Renders to: */}

8. <div class="page">
9. <div>Fixed element</div>
10. <div class="page-content">
11. <p>Page content goes here</p>
12. </div>
13. </div>

Examples

Infinite Scroll

1. export default class extends React.Component {
2. constructor(props) {
3. super(props);

5. this.state = {
6. items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
7. allowInfinite: true,
8. showPreloader: true,
9. };
10. }
11. render() {
12. return (
13. <Page
14. infinite
15. infiniteDistance={50}
16. infinitePreloader={this.state.showPreloader}
17. onInfinite={this.loadMore.bind(this)}
18. >
19. <Navbar title="Infinite Scroll"></Navbar>
20. <BlockTitle>Scroll bottom</BlockTitle>
21. <List>
22. {this.state.items.map((item, index) => (
23. <ListItem title={`Item ${item}`} key={index}></ListItem>
24. ))}
25. </List>
26. </Page>
27. )
28. }
29. loadMore() {
30. const self = this;
31. if (!self.state.allowInfinite) return;
32. self.setState({ allowInfinite: false });

34. setTimeout(() => {
35. const items = self.state.items;
36. if (items.length >= 200) {
37. self.setState({ showPreloader: false });
38. return;
39. }

41. const itemsLength = items.length;

43. for (let i = 1; i <= 20; i += 1) {
44. items.push(itemsLength + i);
45. }

47. self.setState({
48. items,
49. allowInfinite: true,
50. });
51. }, 1000);
52. }
53. };

Pull To Refresh

1. export default class extends React.Component {
2. constructor(props) {
3. super(props);

5. this.state = {
6. items: [
7. {
8. title: 'Yellow Submarine',
9. author: 'Beatles',
10. cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
11. },
12. {
13. title: 'Don\'t Stop Me Now',
14. author: 'Queen',
15. cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
16. },
17. {
18. title: 'Billie Jean',
19. author: 'Michael Jackson',
20. cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
21. },
22. ],
23. songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
24. authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
25. }
26. }
27. render() {
28. return (
29. <Page ptr onPtrRefresh={this.loadMore.bind(this)}>
30. <Navbar title="Pull To Refresh"></Navbar>
31. <List mediaList>
32. {this.state.items.map((item, index) => (
33. <ListItem
34. key={index}
35. title={item.title}
36. subtitle={item.author}
37. >
38. <img slot="media" src={item.cover} width="44" />
39. </ListItem>
40. ))}
41. <BlockFooter>
42. <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>
43. </BlockFooter>
44. </List>
45. </Page>
46. );
47. }
48. loadMore(event, done) {
49. const self = this;
50. setTimeout(() => {
51. const { items, songs, authors } = self.state;
52. const picURL = `https://cdn.framework7.io/placeholder/abstract-88x88-${(Math.floor(Math.random() * 10) + 1)}.jpg`;
53. const song = songs[Math.floor(Math.random() * songs.length)];
54. const author = authors[Math.floor(Math.random() * authors.length)];
55. items.push({
56. title: song,
57. author,
58. cover: picURL,
59. });
60. self.setState({ items });

62. done();
63. }, 1000);
64. }
65. }