ビューSvelteコンポーネント

ビュー - 独自の設定、ナビゲーション、履歴を持つ、アプリの独立した視覚的な部分です。各ビューはまた、異なるナビバーやツールバーのレイアウト、異なるスタイルを持つことができます。つまり、アプリの中のアプリのようなものです。このような機能により、アプリの各部分を簡単に操作することができます。

View Svelteコンポーネントは、Framework7のViewコンポーネントを表しています。

ビューコンポーネント

以下のコンポーネントが含まれています。

View - 単一のビュールーティングコンポーネント
Views - タブとして使用される複数のビューのラッパー要素

ビューのプロパティ

Prop	Type	Default	Description
<View> properties
init	boolean	true	ビューを自動的に初期化します。
tab	boolean		ビューをタブとして使用
tabActive	boolean		View-Tab を現在のアクティブな Tab として定義します。
View Svelte component also accepts all View Parameters. All of them can be passed via separate props on `<View>` component
<Views> properties
tabs	boolean		ビューをタブのラッパーコンテナとして使用

ビューのイベント

スワイプバック関連のイベントは、iOSテーマでのみ利用可能です。

Event	Description
viewInit	イベントは、ビューの初期化時に発生します。
viewResize	イベントはマスター詳細のサイズ変更時に発生します (`masterDetailResizable` が有効な場合)
swipeBackMove	イベントはスワイプバックの移動中に発生します。
swipeBackBeforeChange	イベントは、スワイプバックを解除して前のページに戻るアニメーションの直前に発生します。
swipeBackAfterChange	イベントはスワイプバック後に、前のページへのアニメーションをリリースした時に発生します。
swipeBackBeforeReset	イベントは、あなたがそれを解放したときに現在のページにスワイプバックアニメーションの直前にトリガされます。
swipeBackAfterReset	イベントは、リリースしたときに現在のページにスワイプバックアニメーションの後にトリガされます。
tabShow	イベントは View-Tab が表示/アクティブになった時に発生します。
tabHide	View-Tabが不可視/非アクティブになるとイベントが発生します。

ビューインスタンスへのアクセス

自動初期化を使用してビューを初期化し（init={true}プロップを使用）、ビューAPIを使用する必要がある場合（ルーターなど）、初期化されたインスタンスにアクセスすることができます。

.instance()`コンポーネントのメソッドを呼び出すことで。
nameプロパティ(例: "left")を渡している場合は、f7.views.leftのようにアクセスできます。
メインビュー(main={true}というプロップを持つ)は常に f7.views.main でアクセスできます。

例

最小限のレイアウト

<View main>
  ...
</View>

<!-- レンダリングは -->

<div class="view view-main">
  ...
</div>

タブとしてのビュー

<App>
  ...
  <Views tabs>
    <View id="tab-1" main tab tabActive>...</View>
    <View id="tab-2" tab>...</View>
  </Views>
  ...
</App>

<!-- レンダリング結果 -->
<div class="framework7-root">
  <div class="views tabs">
    <div class="view view-main tab tab-active" id="tab-1">...</div>
    <div class="view tab" id="tab-2">...</div>
  </div>
</div>

パラメータ付き

<View
  url="/home/"
  animate={false}
  iosDynamicNavbar={false}
  browserHistory={true}
>
  ...
</View>