Page
The Page
component provides the basic layout for your app with slots for a
header, sidebar, main content, and a detail view. The Main
slot is the only
slot that is mandatory for rendering the Page
; every other slot is optional.
Check out the UI and design guidelines for more information on how to structure your app using the page.
Import
import { Page } from '@dynatrace/strato-components-preview/layouts';
Use cases
Define responsive layouts
The page handles different screen sizes internally. On smaller screens, a drawer
is used for Sidebar
and DetailView
instead of rendering them next to the
Main
panel. You can configure the breakpoints to determine when to switch to
the drawer.
Default breakpoints:
DetailView
: tabletSidebar
: mobile
Controlling panel state
Use the dismissed
prop and onDismissChange
callback of the panels to control
the panel state yourself. The onDismissChange
is called every time a different
dismiss state is suggested with two arguments:
- The expected state
- The reason for the change
There are three reasons for such a change:
- The viewport width exceeds the breakpoint ('above breakpoint')
- The viewport width surpasses the breakpoint ('below breakpoint')
- The drawer was dismissed by user interaction, either pressing
Escape
('escape') or clicking on the backdrop ('backdrop')
Set minimum panel width
To avoid panels shrinking below a certain value, you can set the minWidth
.
If you provide a
minWidth
bigger than thepreferredWidth
, the minimum width overrides the preferred width.
If the combined minimum width of all panels exceeds the viewport width, the page will have a horizontal scrollbar. Make sure to provide reasonable breakpoints (see the define responsive layouts section) if you want to avoid having a horizontal scroll.
Save & restore panel sizes
To restore the panel sizes, you can utilize e.g. the localStorage
. Resize the
panels in the page below and use the buttons to toggle between pages or reload
the page to see this in effect.
Using the page with react-router
We recommend using
react-router-dom
as the routing library.
The basic concept is to render content based on the matching routes. For
example, you have a set of cards in your main panel. When clicking on a card,
the current route is updated and the DetailView
content changes accordingly.
One page per route
The easiest solution for rendering different pages in your app is to use one page for each route. This way, you can choose which compounds to use per route and configure each page separately.
Nested layouts
The page's compounds can be nested inside other components. This enables you to create different layouts by nesting routes and rendering different parts of the page depending on the current route.
Note: The wrapping components of
Sidebar
,Main
, orDetailView
must not render an actual wrapper in the DOM. This would break the page layout. You can only use components that output the compounds directly, as theFragment
or react-router-dom'sOutlet
.
Scroll behavior
Each of the panels of the page will be a scroll container if the content overflows. If you switch from an already scrolled panel to another scrollable content in the same panel, the browser will remember the old scroll position. You may want to reset the scroll position and start at the top of the scroll container again. To do so, we're exposing a reference to the container element of each panel that you can leverage to reset the scroll position when changing the content.
Keep Sidebar panel mounted
By default, when the Page.Sidebar
content is not visible to the user, it will
also be removed from the DOM to prevent unwanted component updates on hidden
elements. If you want to keep the Page.Sidebar
s content in the DOM to preserve
the state, you can set the keepMounted
prop on the component.