An advanced bottom sheet for Svelte5
For the full experience, open this page on a mobile device and add to homescreen (it's a PWA). Or open devtools and choose a mobile device (iPhone 6/7/8 with device frame recommended). Touch devices only, i.e. desktop not supported.
Features
- Beautiful iOS-like background animations
- Zero dependencies
- Flexible styling - tailwind or vanilla css
- Small
- Feature rich
- Svelte5
- Native html dialog element uth
- Light/dark mode out of the box
- Mobile first, in fact mobile only😉
- Many more buzzwords
Basic sheets
Basic sheets can be opened and closed but not resized.
Basic with full height
The default sheet. Opens at full height.
Basic with fixed height
Opens at specified height
Basic with auto height
Opens at auto height to fit content.
Basic with sticky header
The header sticks to the bottom of the screen
Snap Points
Snap points can be either fixed or auto
Auto snap point
Opens at max height andminimized to fit content.
Fixed snap points
Opens at max height and snapped to specified points.
Initial snap point
Opens at specified snap point.
Scrollable
Sheets are automatically scrollable when content overflows.
Scrollable with fixed snap point
Scrollable sheet that can be minimized to specified snap point.
Dynamic content
You may want to display different content when the sheet is at a snap point. I.e. adjust content for different sizes
Dynamic content with auto snap points
Auto-calculates snap points to fit content
Dynamic content with fixed snap points
Specify fixed snappoints at which the content will change.
Scrollable with dynamic content and auto snap points
The content changes based on the snap point. The scroll position is restored when the scrollable content is made visible again
Detached sheet
Opens at auto height to fit content.
Full sheet
Covers the entire page.
Long sheet
The entire sheet is scrollable.
Stackable
You can open multiple sheets on top of each other.
Stackable Detached
Detached sheets can be stacked too.
Programmatic Control
Use instance methods to control the sheet: showModal, close, snapTo.