Svelte Component Extensions

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

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

For example

<Page>
  <List>
    <ListItem title="Toggle">
      <!-- wrap with extra element -->
      </span>
    </ListItem>
  </List>
</Page>

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.

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

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(pageData) {
    console.log(pageData);
</script>

← Initialize App