AngularJS 1 Reference > ons-page

ons-page

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

実例

The <ons-page> element

The root of a page in Onsen UI is created using the <ons-page> element. It covers the whole screen and is used as a container for the other elements. When managing multiple views, all of them must be contained in <ons-page> element.

<ons-page>
  Content goes here
</ons-page>

This element automatically spawns a background and a content elements. These can also be manually provided for higher customizability:

<ons-page>
  Toolbar here

  <div class="background"></div>

  <div class="content">
    Scrollable content here
  </div>

  Fixed content here
</ons-page>

Since content element is transparent by default, we can add custom colors to the background element. Notice that, if content element is provided, scrollable and fixed content must be manually separated as well.

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
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.
var String このページを参照するための名前を指定します。 Optional. 初期化時のみ有効
ng-infinite-scroll String Path of the function to be executed on infinite scrolling. The path is relative to $scope. The function receives a done callback that must be called when it’s finished. （翻訳中） Optional. 初期化時のみ有効
on-device-back-button Expression デバイスのバックボタンが押された時の挙動を設定できます。 Optional.
ng-device-back-button Expression デバイスのバックボタンが押された時の挙動を設定できます。AngularJSのexpressionを指定できます。 Optional. 初期化時のみ有効
ons-init Expression “init”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-show Expression “show”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-hide Expression “hide”イベントが発火された時の挙動を独自に指定できます。 Optional. 初期化時のみ有効
ons-destroy Expression “destroy”イベントが発火された時の挙動を独自に指定できます。 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に記載をお願いいたします。

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