Skip to main content

    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.

    OverviewPropertiesUsage

    Import​

    import { Page } from '@dynatrace/strato-components-preview/layouts';

    Use cases​

    CodeSandbox

    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: tablet
    • Sidebar: mobile
    CodeSandbox

    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')
    CodeSandbox

    Set minimum panel width​

    To avoid panels shrinking below a certain value, you can set the minWidth.

    If you provide a minWidth bigger than the preferredWidth, 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.

    CodeSandbox

    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.

    CodeSandbox

    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, or DetailView 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 the Fragment or react-router-dom's Outlet.

    CodeSandbox

    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.

    CodeSandbox

    Keep Sidebar / DetailView panel mounted​

    By default, when the Page.Sidebar or Page.DetailView 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 content in the DOM to preserve the state, you can set the keepMounted prop on the component.

    Known limitation

    The keepMounted approach we are using currently doesn't work with e.g. react-router-dom and Outlets nested in the panels, because the rendered react nodes end up in a different position in the react tree, losing the original context. For now, if you need to keep more complex components mounted, you have to implement it in your app.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community