Examples
Below are several examples demonstrating different configurations and use cases of the bottom sheet component.
- Non-dismissible bottom sheet (with multiple snap points)
- Modal bottom sheet (using dialog)
- Modal bottom sheet (maximum height half of viewport)
- Nested dialogs (no extra styling)
- Nested dialogs with a stacking effect and a scaled background effect (extra styling)
- Non-modal bottom sheet with Popover API ("pure CSS")
- Chat (on-screen keyboard avoidance)
- Non-dismissible bottom sheet with dynamic content (to demonstrate dynamic content causes no abrupt re-snapping)