Flyout

Similar to Modal, the Flyout component is used to display longer and more dense information, usually longer forms.

Note: This component renders content inside of a drawer at small viewports.

Usage

import { Flyout } from "@skyltmax/ds9"

Examples

Basic

Use the Flyout child components to provide the appropriate styling to different parts of the flyout. Clicking on the backdrop or pressing the escape key will normally close the flyout but this can be disabled for the duration of a running process.

Code

Inset

Use the inset variant to display the contents in an inset style. Useful for long dense forms.

Code

Sticky Header

Use the Flyout.StickyHeader component to display a sticky header that stays in place when scrolling the flyout contents.

Code

Modal Divider