Framework7 Svelte Package Structure

Package

Framework7 Svelte package contains the following files and folders:

1. framework7-svelte/
2. components/
3. accordion-content.svelte
4. accordion-item.svelte
5. accordion-toggle.svelte
6. accordion.svelte
7. actions-button.svelte
8. actions-group.svelte
9. actions-label.svelte
10. actions.svelte
11. app.svelte
12. ...
13. framework7-svelte.esm.js

Components

All Svelte components are located in components/ folder.

1. import App from 'framework7-svelte/components/app.svelte';
2. import Navbar from 'framework7-svelte/components/navbar.svelte';

Or they can be imported using named import from main file

1. import { App, Navbar } from 'framework7-svelte';

ES Module

Framework7 Svelte plugin can be imported as an ES-next module:

1. // Import Framework7 Core
2. import Framework7 from 'framework7/framework7-lite.js';
3. /*
4. Or import bundle with all components:
5. import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
6. */

8. // Import Framework7 Svelte
9. import Framework7Svelte from 'framework7-svelte';

11. // Init plugin
12. Framework7.use(Framework7Svelte)

By default it exports only Framework7 Svelte plugin without any components. To import components separately, we need to use named import:

1. import { App, Navbar } from 'framework7-svelte';

ES-Next

Note, that Framework7 and Framework7 Svelte ES modules are in ES-next syntax, so don’t forget to enable/configure your Babel/Buble to transpile them as well, as well as template7, dom7 and ssr-window modules that used as dependencies.

← Installation

App Layout →