ビューSvelteコンポーネント

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

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

ビューコンポーネント

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

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

ビュープロパティ

プロパティ	型	デフォルト	説明
<View> プロパティ
init	boolean	true	ビューを自動的に初期化します。
tab	boolean		ビューをタブとして使用します。
tabActive	boolean		ビュータブを現在アクティブなタブとして定義します。
View Svelteコンポーネントは、Viewパラメーターも受け入れます。それらはすべて、`<View>`コンポーネントの個別のプロパティを介して渡すことができます。
<Views> プロパティ
tabs	boolean		Viewsをタブのラッパーコンテナとして使用します。

ビューイベント

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

イベント	説明
viewInit	ビューの初期化時にトリガーされます。
viewResize	マスターディテールのリサイズ時にトリガーされます（`masterDetailResizable` が有効な場合）。
swipeBackMove	スワイプバック中にトリガーされます。
swipeBackBeforeChange	スワイプバックアニメーションが前のページに移動する直前にトリガーされます（離した時）。
swipeBackAfterChange	スワイプバックアニメーションが前のページに移動した後にトリガーされます（離した時）。
swipeBackBeforeReset	スワイプバックアニメーションが現在のページに戻る直前にトリガーされます（離した時）。
swipeBackAfterReset	スワイプバックアニメーションが現在のページに戻った後にトリガーされます（離した時）。
tabShow	ビュータブが表示/アクティブになったときにトリガーされます。
tabHide	ビュータブが非表示/非アクティブになったときにトリガーされます。

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

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

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

例

最小限のレイアウト

<View main>
  ...
</View>

<!-- Renders to: -->

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

タブとしてのViews

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

<!-- Renders to: -->
<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>

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

このページで

ビューコンポーネント
ビュープロパティ
ビューイベント
ビューインスタンスへのアクセス
例