Sheet

The Sheet component allows you to show additional content in an overlay of your application. It is essential to add at least one focusable element inside the Sheet to be keyboard accessible. If none is available the focus will be lost and given to the window.document when opening the sheet.

The developer is responsible for the sheet's visibility via the show prop. This prop must be updated to false in the onDismiss callback to ensure keyboard accessibility.

Import

import { Sheet } from '@dynatrace/strato-components-preview/overlays';

Use cases

CodeSandbox

Custom dismiss functionality

The onDismiss prop allows you to define a custom dismiss functionality. That is triggered when closing the sheet with escape.

CodeSandbox

Accessibility

If there is no title prop, you need to add either an aria-label or aria-labelledby prop to ensure accessibility.

CodeSandbox

Props

SheetProps

extends, , ,

Name	Type	Default	Description
title?		-	The title which is displayed at the top of the sheet.
show?		false	Toggles the visibility of the sheet component.
topoffset?		28	The offset to the top of the App which should not be covered.
actions?		-	Actions will be rendered to the top right, next to the title. They usually contain buttons like 'Apply' or 'Cancel'.
onDismiss?	() =>	-	Handler that is only called if the sheet is closed with the Escape key.