アプリの初期化

    アプリのレイアウトが完成したら、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の項をご参照ください。