View Reactコンポーネント

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

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

Viewコンポーネント

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

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

Viewプロパティ

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

Viewイベント

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

イベント	説明
viewInit	Viewの初期化時にトリガーされるイベント
viewResize	マスター詳細のサイズ変更時にトリガーされるイベント（`masterDetailResizable`が有効な場合）
swipeBackMove	スワイプバック移動中にトリガーされるイベント
swipeBackBeforeChange	リリース時に前のページへのスワイプバックアニメーションの直前にトリガーされるイベント
swipeBackAfterChange	リリース時に前のページへのスワイプバックアニメーションの後にトリガーされるイベント
swipeBackBeforeReset	リリース時に現在のページへのスワイプバックアニメーションの直前にトリガーされるイベント
swipeBackAfterReset	リリース時に現在のページへのスワイプバックアニメーションの後にトリガーされるイベント
tabShow	View-Tabが表示/アクティブになったときにトリガーされるイベント
tabHide	View-Tabが表示されなくなり/非アクティブになったときにトリガーされるイベント

Viewインスタンスへのアクセス

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

nameプロパティ（例：「left」）を渡した場合は、this.$f7.views.leftのようにアクセスできます。
メインビュー（main={true}プロパティ付き）には、常にthis.$f7.views.mainからアクセスできます。

例

最小限のレイアウト

<View main>
  ...
</View>

{/* Renders to: */}

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

{/* 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>

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

このページで

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