Vue Spring Bottom Sheet

Basic usage

Open Example

This component is simple to use and offers convenient dismissal options: close with the keyboard (esc), swipe down, or click outside.
By default, the component utilizes a single snap point determined by its minHeight. This minHeight dynamically adjusts its height based on the content within.

Snap point & content drag

Open Example

You can precisely control where a sheet can be placed on the screen using snap points. If you try to drag it outside the allowed area, it will resist and smoothly snap back into place. Also, if `can-swipe-close="false"`, swiping down won't close the sheet. The `maxHeight` represents the window height, ensuring the sheet can expand to the full height of the window.

Sticky Header & Footer

Open Example

A sticky header acts as a persistent title bar, enhancing visibility and providing a clear target for initiating the drag operation. A sticky footer remains anchored at the bottom of the screen throughout the dragging.

Non-blocking mode

Open Example

Sheets default to blocking mode (like a modal), preventing other page interactions. Disabling blocking (blocking="false") allows for non-intrusive use, ideal to use as an overlay.