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

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 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.Sidebars content in the DOM to preserve the state, you can set the keepMounted prop on the component.

CodeSandbox

Props

PageProps

extends, <.<>, keyof >, ,

Name	Type	Default	Description
disableAnimations?		false	Whether animations should be disabled. If true or 'prefers-reduced-motion' is set to 'reduce', no animations are applied.

Page.Header

The Page.Header is rendered at the very top of the page. Take a look at the UI and design guidelines for information on which components we recommend to use in the header.

HeaderProps

extends, <.<>, keyof >, ,

Page.Sidebar

The Page.Sidebar is the first slot of the page you can use to display content. Take a look at the UI and design guidelines for information on which content we recommend to use in the sidebar.

SidebarProps

Signature:

export declare type SidebarProps = & ;

Page.Main

You should use the Page.Main compound to display the main content of your application. Take a look at the UI and design guidelines for information on which content we recommend to use in the main view.

MainProps

extends, <.<>, | keyof >, ,

Name	Type	Default	Description
minWidth?		320	The minimum width of the main panel in pixels.

Page.DetailView

The Page.DetailView can be leveraged to provide additional information related to the main content. Take a look at the UI and design guidelines for information on which content we recommend to use in the detail view.

DetailViewProps

Signature:

export declare type DetailViewProps = & ;

Page.PanelControlButton

The Page.PanelControlButton updates the dismissed state of an uncontrolled panel. The button automatically renders the correct icons depending on the panel state.

PanelControlButtonProps

Signature:

export declare type PanelControl = { /** The action triggered by the button. */ action?: | | ; /** The target panel controlled by the button. */ target?: ; } & <<>, | | >;