<PopupPageLayout />

Constructor

# <PopupPageLayout children data-testid selectedIdx onPageChange />

PropTypes:
Name Type Required Description Default
children node No An array of components which are rendered as individual pages []
data-testid string No Internal prop used for testing function()
selectedIdx number No The index of the currently shown page 0
onPageChange func No Callback fired when a user navigates the page layout or closes the popup. The callback is passed the current page index and the next page index or `null` if the popup was closed. If the children of the layout passed a `data` prop, this is passed instead of the index for easier consumption.

View Source Popup/PopupInsert/PopupPageLayout/index.js, line 10

Example

Examples

The PopupPageLayout component provides out-of-the-box paging capabilities for popups. All child components within a PopupPageLayout are managed by the page layout and only one page is shown at a time.

return (
  <Popup show={true} pixel={[50, 150]} arrow={'left'} inline={true}>
    <PopupPageLayout>
      {[{name: 'My feature'}, {name: 'Your feature'}].map(feature => {
        // with Openlayers features, you'd do `attributes={feature.getProperties()}`
        return <PopupDefaultPage title={feature.name} attributes={feature} />
      })}
    </PopupPageLayout>
  </Popup>
)

If you intend to create custom pages with different styling than the PopupPageLayout you can do so. See the docs on PopupPageLayoutChild for how to create custom page experiences without having to manage page state.