RhombusKit

Sheet

A sheet (or drawer) is a modal panel that slides in from an edge of the screen for a focused, temporary task — filters, details, a quick form. RhombusKit's RhombusSheetService opens one on @angular/cdk/dialog + overlay (scrim, focus-trap, focus-restore, scroll-block), notMatDialog — so it slides from an edge and carries no @angular/animations dependency. No new tokens.

Example

When to use — and what else to reach for

  • Sheet — a temporary, modal panel anchored to an edge for a side task (filters, a record's detail, a short form). It traps focus and dims the page; you finish and dismiss it.
  • App Shell sidenav — a persistent layout frame for primary navigation, part of the page, not a modal overlay.
  • Dialog — a centred modal for a confirmation or a compact form that isn't tied to an edge.
  • Popover — a small, non-modal panel anchored to the trigger that summoned it; the page stays interactive.

Migrating from Material

Replaces MatBottomSheet (and covers the edge-drawer use of mat-sidenav opened as an overlay). For a persistent sidenav, use the App Shell instead.

Was this page helpful?