Svelte Component Extensions

After Svelte mounts the app and init Framework7, we will have Framework7’s initialized instance and some other useful properties.

Framework7 Instance & Utils

In addition to Framework7 Svelte components there are some useful props and methods we can import from framework7-svelte:

  1. import { f7, f7ready, theme } from 'framework7-svelte';
  2. // ...
f7Main Framework7’s initialized instance. It allows you to use any of Framework7 APIs
f7readyCallback function that will be executed when Framework7 fully intialized. Useful to use in components when you need to access Framework7 API and to be sure it is ready. So it is safe to put all Framework7 related logic into this callback. For example:
  1. <Page>
  2.   <Link onClick={onClick}>Click</Link>
  3. </Page>
  4. <script>
  5.   import { onMount } from ‘svelte’;
  6.   import { f7, f7ready, Page } from ‘framework7-svelte’;
  8.   function onClick() {
  9.     // Safe to use without f7ready
  10.     f7.dialog.alert(‘Clicked!’);
  11.   }
  13.   onMount(() => {
  14.     f7ready(() => {
  15.       // Framework7 initialized
  16.       f7.dialog.alert(‘Hello world’);
  17.     })
  18.   })
  19. </script>
themeObject with boolean properties with information about currently used theme (iOS, MD or Aurora): theme.ios, theme.material and theme.aurora

If you need other useful Framework7 utils you can import them directly from Framework7 core library:

DeviceDevice utilities
RequestRequest library for XHR requests
UtilsUtils object with few useful utilities
  1. import { Device, Request, Utils } from 'framework7';
  2. import { f7, f7ready, theme } from 'framework7-svelte';
  4. // ...

Slots

All Framework7 Svelte components use slots to distribute children across component structure. But due to Svelte limitation it is not allowed to use slots on custom components, so sometimes you may need to wrap it with dummy HTML element or use HTML layout instead:

For example

  1. <Page>
  2.   <List>
  3.     <ListItem title="Toggle">
  4.       <!-- wrap with extra element -->
  5.       <span slot="after">
  6.         <Toggle />
  7.       </span>
  8.     </ListItem>
  9.   </List>
  10. </Page>

Events

All Framework7 Svelte components support events. But the way how Svelte handles events (by emitting CustomEvent) can be inconvenient when we need to get event arguments (via event.detail) and especially when there are few arguments.

So all Framework7 Svelte components emit events with arguments as array:

  1. <Page on:pageInit={onPageInit}>
  2.   <!-- -->
  3. </Page>
  4. <script>
  5.   // pageInit event has one argument with page data
  6.   function onPageInit(event) {
  7.     // it will be available in event.detail array
  8.     const pageData = event.detail[0]
  9.     console.log(pageData);
  10.   }
  11. </script>

To workaround this, all Framework7 Svelte component events has same `on${Event}` prop callback:

  1. <Page onPageInit={onPageInit}>
  2.   <!-- -->
  3. </Page>
  4. <script>
  5.   // pageInit event has one argument with page data
  6.   function onPageInit(pageData) {
  7.     console.log(pageData);
  8.   }
  9. </script>

← Initialize App

Navigation / Router →