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
:
import { f7, f7ready, theme } from 'framework7-svelte';
// ...
f7 | Main Framework7's initialized instance. It allows you to use any of Framework7 APIs |
f7ready | Callback 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:
|
theme | Object 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:
Device | Device utilities |
Request | Request library for XHR requests |
Utils | Utils object with few useful utilities |
import { Device, Request, Utils } from 'framework7';
import { f7, f7ready, theme } from 'framework7-svelte';
// ...
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
<Page>
<List>
<ListItem title="Toggle">
<!-- wrap with extra element -->
<span slot="after">
<Toggle />
</span>
</ListItem>
</List>
</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:
<Page on:pageInit={onPageInit}>
<!-- -->
</Page>
<script>
// pageInit event has one argument with page data
function onPageInit(event) {
// it will be available in event.detail array
const pageData = event.detail[0]
console.log(pageData);
}
</script>
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>