ページ

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

ページレイアウト

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

ページ名

お気づきかもしれませんが、各ページには一意のページ名を持つdata-name属性があります。必須ではありませんが、「ページイベント」または「ページコールバック」内で役立つ場合があります。これにより、どのページがロードされて利用可能であるかを定義できるため、ページに必要な操作を行うことができます。

ページコンテンツ

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

ページイベント

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

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

// Option 1. Using one 'page:init' handler for all pages
$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
})

// Option 2. Using live 'page:init' event handlers for each page
$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

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

新しいページが読み込まれてビュー（アプリのメインの表示部分）に遷移すると、ページ要素に異なるクラスが設定されます。

新しいページをロード/開くと、次のことが発生します。

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つのハンドラーのみを使用する場合、どのページがロードされているかをどのように判断しますか？この場合、イベントの詳細にページデータがあります。

// In page events:
$$(document).on('page:init', function (e) {
  // Page Data contains all required information about loaded and initialized page
  var page = e.detail;
})

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

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

上記の例では、page変数にページデータがあります。これは、次のプロパティを持つオブジェクトです

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

ページイベント/コールバックを使用せず、ページデータにアクセスする必要がある場合は、HTMLElementのf7Pageプロパティからアクセスできます

var $$ = Dom7;

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

// do something with page data

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

: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 .dark,
.ios.dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 400ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 500;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 8px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-page-bg-color: var(--f7-md-surface);
}
.dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
}