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
Custom dismiss functionality
The onDismiss
prop allows you to define a custom dismiss functionality. That
is triggered when closing the sheet with escape.
Accessibility
If there is no title prop, you need to add either an aria-label
or
aria-labelledby
prop to ensure accessibility.
Still have questions?
Find answers in the Dynatrace Community