アプリを初期化

アプリのレイアウトができたので、Svelte コンポーネントをマウントしてアプリを初期化する必要があります。使用可能な Framework7 の初期化パラメータについては、Framework7 アプリのパラメータセクションを参照してください。

Webpack、Rollup、または ES-next モジュールをサポートする他のバンドラーを使用している場合、次の構造にすることができます

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>

// app.js

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';

// Import F7-Svelte Plugin
import Framework7Svelte from 'framework7-svelte';

// Init F7-Svelte Plugin
Framework7.use(Framework7Svelte);

// Import Main App component
import App from './App.svelte';

// Mount Svelte App
const app = new App({
  target: document.getElementById('app'),
});

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

<!-- App.svelte -->
<!-- Main Framework7 App component where we pass Framework7 params -->
<App {...f7params}>
  <!-- initial page is specified in routes.js -->
  <View main url="/" />
</App>

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

  const f7params = {
    // Array with app routes
    routes,
    // App Name
    name: 'My App',
    // ...
  };

</script>

上記の例では、

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

また、アプリ内でページ間を移動する場合には、ルートの配列を指定する必要があります。 Svelte コンポーネントの拡張、ルーター、およびルートに関する情報については、ナビゲーションルーターセクションを参照してください。

このドキュメントを改善する

このページで