AngularJS 1 Reference > ons-page

ons-page

This component defines the root of each page. If the content is large it will become scrollable. A navigation bar can be added to the top of the page using the <ons-toolbar> element.

Tutorial

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.

See also

Attributes

[improve this]
Name Type Description
modifier String Specify modifier name to specify custom styles. 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 Variable name to refer this page. Optional. Works only during initialization.
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. Works only during initialization.
on-device-back-button Expression Allows you to specify custom behavior when the back button is pressed. Optional.
ng-device-back-button Expression Allows you to specify custom behavior with an AngularJS expression when the back button is pressed. Optional. Works only during initialization.
ons-init Expression Allows you to specify custom behavior when the “init” event is fired. Optional. Works only during initialization.
ons-show Expression Allows you to specify custom behavior when the “show” event is fired. Optional. Works only during initialization.
ons-hide Expression Allows you to specify custom behavior when the “hide” event is fired. Optional. Works only during initialization.
ons-destroy Expression Allows you to specify custom behavior when the “destroy” event is fired. Optional. Works only during initialization.

Properties

[improve this]
Name Description
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 Back-button handler.
data User’s custom data passed to pushPage()-like methods.

Preset Modifiers

[improve this]
Name Description
material Material Design style

Events

[improve this]

Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).

Name Description
init Fired right after the page is attached.
show Fired right after the page is shown.
hide Fired right after the page is hidden.
destroy Fired right before the page is destroyed.
init

Fired right after the page is attached.

Parameters
Name Type Description
event Object Event object.
show

Fired right after the page is shown.

Parameters
Name Type Description
event Object Event object.
hide

Fired right after the page is hidden.

Parameters
Name Type Description
event Object Event object.
destroy

Fired right before the page is destroyed.

Parameters
Name Type Description
event Object Event object.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.