アプリの初期化

アプリのレイアウトが完成したら、Svelteコンポーネントをマウントし、アプリを初期化する必要があります。Framework7の初期化パラメータについては、適切なFramework7 App Parametersのセクションで読むことができます。

WebpackやRollup、またはES-nextモジュールをサポートする他のバンドルラーを使用していると仮定すると、以下のような構造になります。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... メタとスタイル ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- アプリのルート要素 -->
    <div id="app"></div>

    <!-- スクリプトが自動注入される -->
  </body>
</html>

// app.js

// F7バンドルのインポート
import Framework7 from 'framework7/lite-bundle';

// F7-Svelteプラグインのインポート
import Framework7Svelte from 'framework7-svelte';

// F7-Svelteプラグインの初期化
Framework7.use(Framework7Svelte);

// メインアプリコンポーネントのインポート
import App from './App.svelte';

// Svelteアプリのマウント
const app = new App({
  target: document.getElementById('app'),
});

ルートのApp.svelteコンポーネントには、通常、トップレベルのFramework7Appコンポーネントがあります。このコンポーネントは、アプリの設定に使用されます。

<!-- App.svelte -->
<!-- メインのFramework7 Appコンポーネントで、Framework7のパラメータを渡します。 -->
<App {...f7params}>
  <!-- 初期ページはroutes.jsで指定します。 -->
  <View main url="/" />
</App>

<script>
  import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-svelte';
  import routes from './routes.js';

  const f7params = {
    // アプリのルートを持つ配列
    routes,
    // アプリ名
    name: 'My App',
    // アプリのID
    id: 'com.myapp.test',
    // ...
  };

</script>

上記の例では

AppのメインのFramework7アプリコンポーネントのparams`プロパティにFramework7パラメータを渡しています。
Appのターゲットとして使用されるルート要素(document.getElementById('app'))は、Framework7のルート要素として使用されます。

また、ルート付きの配列を指定する必要があります（アプリ内でページ間のナビゲーションを行う場合）。Svelte Component Extensions、ルーター、ルートについては、Navigation Routerの項をご参照ください。