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