React Reference > Page Component

<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.

Usage 

<Page
    renderFixed={() => <Fab></Fab>}
    renderToolbar={() => <Toolbar>...</Toolbar>}
    contentStyle={{padding: 40}}>
    <div> Page content </div>
  </Page>

Props

[improve this]
Name Type Description
contentStyle object Specify the style of the page content. Optional. Optional.
modifier string Specify modifier name to specify custom styles. Optional. Optional.
renderModal func
() => null 		This function renders a modal that masks current screen. Optional.
renderToolbar func
() => null 		This function renders the toolbar of the page. Optional.
renderBottomToolbar func
() => null 		This function renders the bottom toolbar of the page. Optional.
renderFixed func
() => 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 func Fired right after the page is attached. Optional.
onShow func Called Fired right after the page is shown. Optional.
onHide func Called after the page is hidden. Optional.
onInfiniteScroll func 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 func Custom handler for device back button. Optional.

Preset Modifiers

[improve this]
Name Description
material Material Design style

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.