ページ

ページは、アプリのコンテンツを表示するための主要なコンポーネント（コンテナ）のひとつです。

ページのレイアウト

<div class="page" data-name="home">
  <div class="page-content">
    ... scrollable page content goes here ...
  </div>
</div>

ページ名

ご存知のように、各ページには、ユニークなページ名を持つ data-name 属性があります。これは必須ではありませんが、「ページイベント」や「ページコールバック」の中で役に立ちます。この属性は、どのページが読み込まれ、利用可能であるかを定義するのに役立ち、そのページに対して必要な操作を行うことができます。

ページコンテンツ

すべてのビジュアルコンテンツ（リストビューやフォームなど）は <div class="page-content"> の中に入れる必要があり、<div class="page"> の子になります。これは正しいスタイリング、レイアウト、スクロールのために必要です。

ページイベント

次に、ページナビゲーションの最も重要な部分のひとつである「ページイベント」を見てみましょう。ページイベントでは、特定のページ用のJavaScriptを実行することで、読み込まれたばかりのページを操作することができます。

Event	Target	Description
page:mounted	Page Element<div class="page">	イベントは、新しいページがDOMに挿入されたときにトリガされます。または、keepAliveルートを持つページがDOMにマウント/アタッチされたとき。
page:init	Page Element<div class="page">	Framework7が必要なページのコンポーネントとナビバーを初期化した後にイベントが発生します。
page:reinit	Page Element<div class="page">	このイベントは、すでに初期化されたページに移動した場合に発生します。
page:beforein	Page Element<div class="page">	全てが初期化され、ページがビュー（アクティブ／カレントポジション）に移行できる状態になると、イベントが発生します。
page:afterin	Page Element<div class="page">	ページが表示に移行した後にイベントが発生します。
page:beforeout	Page Element<div class="page">	イベントは、ページが表示されなくなる直前に発生します。
page:afterout	Page Element<div class="page">	ページが表示されなくなった後にイベントが発生する
page:beforeunmount	Page Element<div class="page">	イベントは、keepAlive ルートを持つページが、DOM からアンマウント/デタッチされるときに発生します。
page:beforeremove	Page Element<div class="page">	イベントは、ページがDOMから削除される直前に発生します。このイベントは、いくつかのイベントを切り離したり、メモリを解放するためにいくつかのプラグインを破棄する必要がある場合に、非常に便利です。このイベントは keepAlive ルートではトリガされません。
page:tabshow	Page Element<div class="page">	このイベントは、ページの親である タブとして表示 が表示されたときに発生します。
page:tabhide	Page Element<div class="page">	ページの親である View as Tab が非表示になると、イベントが発生します。

では、これらのイベントをどのように利用するか見てみましょう。ページのイベントハンドラを追加するには2つの方法があります。

// オプション1. すべてのページに1つの'page:init'ハンドラを使う
$$(document).on('page:init', function (e) {
  // ページが読み込まれて初期化されたときに、ここで何かを行います。
})

// オプション 2. 各ページにライブの'page:init'イベント・ハンドラを使う
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // data-name="about "属性を持つページが読み込まれ、初期化されたときにここで何かを行う
})

ページ読み込みシーケンスクラス

新しいページがロードされ、ビュー（アプリの主な可視部分）に移行するとき、ページ要素には異なるクラスがあります。

新しいページを読み込んだり開いたりすると，次のようなことが起こります。

1. 現在アクティブなページは page-current クラスを持ちます。
2. 読み込んだページがDOMに存在しない場合（Ajaxやテンプレート、コンポーネントから読み込まれた場合など）は、DOMに追加されます。
3. ロード/オープンされたページは、その要素に追加の page-next クラスが設定されます。
4. ルーター要素 (<div class="view">) には、以下のような動作をする router-transition-forward クラスが追加されます。
   • page-next`（新規ページ）クラスが設定されたページは、ビュー内に移動します。
   • page-current`(現在のページ)クラスを持つページがビューから移動します。
5. 移行が完了すると、新たに読み込んだページは page-current クラスを持つようになります。
6. そして、以前にアクティブだったページは page-previous クラスを持つようになります。

前のページをロード/オープンする（戻る）と、以下のようになります。

1. 現在アクティブなページは page-current クラスを持ちます。
2. 戻ったページがDOMに存在しない場合(例：Ajaxやテンプレート、コンポーネントから読み込まれた場合)は、DOMに追加されます。
3. 戻ったページは、その要素に追加の page-previous クラスが設定されます。
4. ルーター要素 (<div class="view">) には、以下のような動作をする router-transition-backward クラスが追加されます。
   • page-previous` (戻るページ)クラスを持つページは、ビューの中に移動します。
   • page-current` (現在のページ) クラスを持つページがビューから退出する。
5. 移行が完了すると、戻ってきた新しいページは page-current クラスを持つようになります。
6. そして、以前にアクティブだったページは page-next クラスを持つことになります。なお、このページが動的にDOMに追加されていた場合には、DOMから削除されます。

ページデータ

ご覧のように非常に簡単ですが、ハンドラが1つしかない場合、どのページが読み込まれたかをどうやって判断するのでしょうか？この場合は、イベントの詳細にページデータを用意します。

// ページイベントでは
$$(document).on('page:init', function (e) {
  // ページデータには、読み込まれて初期化されたページに関するすべての必要な情報が含まれています。
  var page = e.detail;
})

また、上記の例のようにイベントハンドラがDom7を使って割り当てられている場合は、第2引数に渡されます。

// In page events:
$$(document).on('page:init', function (e, page) {
  console.log(page);
})

さて、上記の例では、page変数にページデータが入っています。これは次のようなプロパティを持つオブジェクトです。

page.app	object	Initialized app instance
page.view	object	View instance that contains this page (if this View was initialized)
page.router	object	Router instance that contains this page (if this View was initialized). Same as page.view.router
page.name	string	Value of page's data-name attribute
page.el	HTMLElement	Page element
ページ.$el	object	Dom7 instance with Page element
ページ.from	string	Page position before transition or direction of where this Page comes from. It will be next if you load new page, previous - if you go back to this page, or current if this page replaces the currently active one.
ページ.to	string	New page position or where this page goes to. Can be same next, previous or current
ページの位置	string	Alias for page.from
ページの方向	string	Direction of page transition (if applicable). Can be forward or backward
ページ.ルート	object	Route associated with this page, object with current route data that was used to load this page. It has the following properties url - ルートの URL path - ルートのパス query - ルートのクエリを持つオブジェクト。もしURLが /page/?id=5&foo=bar であれば、次のようなオブジェクトが含まれます {id: '5', foo: 'bar'} 。 params - ルートのパラメータです。もし、/page/user/:userId/post/:postId/というパスでマッチングしたルートがあり、ページのURLが/page/user/55/post/12/であれば、以下のようなオブジェクトになります {userId: '55', postId: '12'} name - ルート名 hash - ルートのURLハッシュ route - 利用可能なルートの中からマッチするルートを持つオブジェクト context - ルートに渡されたコンテキスト
page.pageFrom	object	Page data of the page that was currently active before this new page.

ページデータへのアクセス

ページイベントやコールバックを使用せず、ページデータにアクセスする必要がある場合は、HTML要素の f7Page プロパティを使ってアクセスすることができます。

var $$ = Dom7;

var page = $$('.page[data-name="somepage"]')[0].f7Page;

// ページデータにアクセスする

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-page-master-width: 320px;
  --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  --f7-page-master-border-width: 1px;
  --f7-page-swipeback-transition-duration: 300ms;
  --f7-page-parallax-transition-duration: 500ms;
  --f7-page-cover-transition-duration: 450ms;
  --f7-page-dive-transition-duration: 500ms;
  --f7-page-fade-transition-duration: 500ms;
  --f7-page-flip-transition-duration: 700ms;
  --f7-page-push-transition-duration: 500ms;
  /*
  --f7-page-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
  --f7-page-title-line-height: 1.2;
  --f7-page-title-text-color: inherit;
  --f7-page-title-padding-left: 16px;
  --f7-page-title-padding-right: 16px;
}
.ios {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 700;
  --f7-page-title-letter-spacing: -0.03em;
  --f7-page-title-padding-vertical: 6px;
  --f7-page-bg-color: #efeff4;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 250ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 500;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 8px;
  --f7-page-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
  --f7-page-bg-color: #121212;
}
.aurora {
  --f7-page-transition-duration: 250ms;
  --f7-page-title-font-size: 28px;
  --f7-page-title-font-weight: bold;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 7px;
  --f7-page-bg-color: #f3f4f6;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-page-bg-color: #121212;
}
.theme-dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
}