AdwDialog
An adaptive dialog (floating on desktop, bottom-sheet on mobile).
Preview
CSS Node Tree
dialog[.floating|.bottom-sheet][.narrow][.short]
├── floating-sheet
│ ├── dimming
│ └── sheet.background
└── bottom-sheet
├── dimming
└── sheet.background[.flush-left][.flush-right]Props
Prop
Type
Behavior
- Escape or the header bar's close button close it. When
canCloseis false, they callonCloseAttemptinstead. presentationMode="auto"shows a bottom sheet while the window (or viewport) is at most 450px wide or 360px tall. In bottom-sheet mode, clicking the dimmed area also closes it.- While it's open, Tab and the arrow keys move the focus within the dialog, and the page behind it doesn't scroll.