Angular 2+ Reference > ons-page

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に記載をお願いいたします。

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