ビュー・ビュー・コンポーネント

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

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

ビューコンポーネント

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

f7-view - 単一の View-router コンポーネント
f7-views - タブとして使用される複数のビューのラッパー要素

ビューのプロパティ

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

ビューのイベント

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

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

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

自動初期化を使用してビューを初期化し(init:true prop)、ビューAPIを使用する必要がある場合(ルータのように)、初期化されたインスタンスにアクセスすることができます。

nameプロパティ(例: "left")を渡していれば、f7.views.leftのようにアクセスできます。
メインビュー(main="true"のプロップを持つ)は常に f7.views.main でアクセスできます。

例

最小限のレイアウト

<f7-view main>
  ...
</f7-view>

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

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

タブとしてのビュー

<f7-app>
  ...
  <f7-views tabs>
    <f7-view id="tab-1" main tab tab-active>...</f7-view>
    <f7-view id="tab-2" tab>...</f7-view>
  </f7-views>
  ...
</f7-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>

パラメータ付き

<f7-view
  url="/home/"
  :animate="false"
  :ios-dynamic-navbar="false"
  :browser-history="true"
>
  ...
</f7-view>