スポンサースポンサーになる

Svelte コンポーネント拡張

Svelteがアプリをマウントし、Framework7を初期化した後、`framework7-svelte`パッケージからインポートできるFramework7の初期化インスタンスといくつかの便利なプロパティにアクセスできます。

f7ready

Framework7が完全に初期化されたときに実行されるコールバック関数です。Framework7 APIにアクセスする必要があるコンポーネントで使用し、準備ができていることを確認するのに便利です。そのため、Framework7関連のロジックをすべてこのコールバックに配置しても安全です。引数として、初期化されたFramework7インスタンスを受け取ります。例えば

...
<script>
  import { onMount } from 'svelte';
  import { f7ready } from 'framework7-svelte';

  onMount(() => {
    f7ready(() => {
      // Framework7 initialized
      f7.dialog.alert('Component mounted');
    })
  })
</script>

f7

Framework7のメインの初期化インスタンス。Framework7 APIのいずれかを使用できます。

Framework7インスタンスにアクセスした時点で既に初期化されていることが確実な場合は、インポートして直接使用できます。

<script>
  import { f7 } from 'framework7-svelte';

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...
</script>

テーマ

現在使用されているテーマ（iOSまたはMD）に関する情報を含むブール値プロパティを持つオブジェクトです。`theme.ios`、`theme.md`。

<script>
  import { theme } from 'framework7-svelte';

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
</script>

`f7route` と `f7router`

ルーターインスタンスと現在のルートは、propsを介してルーターコンポーネントに渡されます。

このプロパティは、ルーターでロードされたコンポーネント（例：ページ、ルーティング可能なモーダル、ルーティング可能なタブ）でのみ使用できます。「より深い」子コンポーネントでこのプロパティにアクセスする必要がある場合は、propsを使用して渡す必要があります。

<script>
  import { onMount } from 'svelte';
  // define props so the component will receive it
  export let f7route;
  export let f7router;

  onMount(() => {
    console.log(f7route.url)
  });

  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
</script>

`f7route` は現在のルートであり、以下のプロパティを持つオブジェクトです。

スロット

すべてのFramework7 Svelteコンポーネントは、`slots`を使用してコンポーネント構造全体に子を配布します。ただし、Svelteの制限により、カスタムコンポーネントでスロットを使用することはできないため、ダミーHTML要素でラップするか、HTMLレイアウトを使用する必要がある場合があります。

例えば

<Page>
  <List>
    <ListItem title="Toggle">
      <!-- wrap with extra element -->
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
</Page>

イベント

すべてのFramework7 Svelteコンポーネントはイベントをサポートしています.しかし Svelte がイベントを処理する方法 (CustomEvent を発行することで) は、イベント引数 ( `event.detail` 経由で) を取得する必要がある場合、特に引数が少ない場合は不便な場合があります.

そのため、すべての Framework7 Svelte コンポーネントは、引数を配列としてイベントを発行します.

<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>

これを回避するために、すべての Framework7 Svelte コンポーネント イベントは同じ `on${Event}` prop コールバックを持ちます.

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(pageData) {
    console.log(pageData);
  }
</script>
このドキュメントの改善
このページについて