<Page />

This component is handling the entire page. The content can be scrolled.

To add fixed content that doesn’t scroll with the page the renderFixed prop is used.

A page toolbar can be added with the renderToolbar prop.

Tutorial

The <Page> component

The <Page> component serves as the main view of a screen in an app. It covers the whole screen and is used as a container for the other components.

<Page>
  Content goes here
</Page>

Props

Name Type Default Value Description
contentStyle Object Specify the style of the page content. Optional. Optional.
modifier string Specify modifier name to specify custom styles. Optional. Optional.
renderModal function
() => null
This function renders a modal that masks current screen. Optional.
renderToolbar function
() => null
This function renders the toolbar of the page. Optional.
renderBottomToolbar function
() => null
This function renders the bottom toolbar of the page. Optional.
renderFixed function
() => null
This function renders fixed content of the page. Can be used to render Fab or SpeedDial components as well as other components that don’t scroll with the page. Optional.
onInit function Fired right after the page is attached. Optional.
onShow function Called Fired right after the page is shown. Optional.
onHide function Called after the page is hidden. Optional.
onInfiniteScroll function Called when scrolling to the bottom of the page. It gets a ‘done’ callback (first argument) that must be called when it’s finished. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Preset Modifiers

Name Description
material Material Design style

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.