ons-page

ページ定義のためのコンポーネントです。このコンポーネントの内容はスクロールが許可されます。

実例

<ons-page>要素

Onsen UIを使ったアプリケーションでは、<ons-page>要素を使ってある画面を作成します。この要素は、スクリーンいっぱいに広がり他の要素のコンテナとして利用されます。

コンテンツを配置する

<ons-page>要素で作った画面にコンポーネントを配置するには、contentクラス属性をもつdiv要素以下に配置してください。

<ons-page>
  <div class="content">
    Hello World!
  </div>
</ons-page>

次のように書くこともできます。

<ons-page>
  <div class="page__content">
    Hello World!
  </div>
</ons-page>

ツールバーを配置する

ほとんどのモバイルアプリケーションでは、画面の上部にツールバーを持ちます。このツールバーにはテキストやボタン等を配置できます。

Onsen UIでは、<ons-toolbar>要素を使ってツールバーを置くことができます。ツールバー内には、次のように左右中央に要素を配置することができます。

<ons-page>
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button>Left</ons-toolbar-button>
    </div>
    <div class="center">
      Title
    </div>
    <div class="right">
      <ons-toolbar-button>Right</ons-toolbar-button>
    </div>
  </ons-toolbar>

  <div class="content">
    ...
  </div>
</ons-page>

背景を配置する

<ons-page>の背景を表現する要素は、<ons-page>コンポーネント内に自動的に補完されますが、開発者がページの背景を指定したい場合にはクラス属性にbackgroundを指定したdiv要素を手動で配置することができます。

次のコードでは、<ons-page>の背景をgrayにします。

<ons-page>
  <div class="background" style="background-color: gray;"></div>
  <div class="content">
    ...
  </div>
</ons-page>

背景を指定するには、次のように書くこともできます。

<ons-page>
  <div class="page__background" style="background-color: gray;"></div>
  <div class="page__content">
    ...
  </div>
</ons-page>

関連情報

属性

名前 型 / デフォルト値 概要
modifier String スタイル定義をカスタマイズするための名前を指定します。 Optional.
on-infinite-scroll String Path of the function to be executed on infinite scrolling. Example: app.loadData. The function receives a done callback that must be called when it’s finished. (翻訳中) Optional.

プロパティ概要

名前 概要
onInfiniteScroll Function to be executed when scrolling to the bottom of the page. The function receives a done callback as an argument that must be called when it’s finished. (翻訳中)
onDeviceBackButton バックボタンハンドラ。
data User’s custom data passed to pushPage()-like methods. (翻訳中)

プリセットのmodifier

Name 概要
material Material Design style (翻訳中)

イベント

名前 概要
init ページがアタッチされた後に発火します。
show ページが表示された後に発火します。
hide ページが隠れた後に発火します。
destroy ページが破棄される前に発火します。
init

ページがアタッチされた後に発火します。

パラメーター
名前 概要
event Object Event object.
show

ページが表示された後に発火します。

パラメーター
名前 概要
event Object Event object.
hide

ページが隠れた後に発火します。

パラメーター
名前 概要
event Object Event object.
destroy

ページが破棄される前に発火します。

パラメーター
名前 概要
event Object Event object.

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。