Page Svelte 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 Svelte component represents Framework7’s Page.

Page Components

There are following components included:

• Page - main page element
• PageContent - additional inner page content element

Page Properties

Page Events

Page Slots

Page Svelte 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

<Page
  infinite
  infiniteDistance={50}
  infinitePreloader={showPreloader}
  onInfinite={loadMore}
>
  <Navbar title="Infinite Scroll"></Navbar>
  <BlockTitle>Scroll bottom</BlockTitle>
  <List>
    {#each items as item, index (index)}
      <ListItem title={`Item ${item}`}></ListItem>
    {/each}
  </List>
</Page>
<script>
  import {Page, Navbar, BlockTitle, List, ListItem} from 'framework7-svelte';
  let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  let allowInfinite = true;
  let showPreloader = true;
  function loadMore() {
    if (!allowInfinite) return;
    allowInfinite = false;
    setTimeout(() => {
      if (items.length >= 200) {
        showPreloader = false;
        return;
      }
      const itemsLength = items.length;
      for (let i = 1; i <= 20; i += 1) {
        items.push(itemsLength + i);
      }
      items = items;
      allowInfinite = true;
    }, 1000);
  }
</script>

Pull To Refresh

<Page ptr onPtrRefresh={loadMore}>
  <Navbar title="Pull To Refresh"></Navbar>
  <List mediaList>
    {#each items as item, index (index)}
      <ListItem
        title={item.title}
        subtitle={item.author}
      >
        <img slot="media" src={item.cover} width="44" alt="" />
      </ListItem>
    {/each}
  </List>
  <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>
</Page>
<script>
  import {Page, Navbar, List, ListItem, BlockFooter} from 'framework7-svelte';
  let 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',
    },
  ];
  let songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
  let authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
  function 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,
      });
      items = items;
      done();
    }, 1000);
  }
</script>

← Navbar

Panel / Side Panels →