1. Docs
2. Components
3. Sheet

Sheet

The <velin-sheet> component is a bottom sheet dialog with focus trap and scroll lock. Methods: open() and close(). Added in 0.7.5.

Example

<velin-sheet id="sheet" title="Settings"><p>Content</p></velin-sheet>

Accessibility

• role="dialog" and aria-modal="true" while open.
• Focus trap and Escape to close.

Import

Load the bundle once, then use the custom element in your markup:

<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-sheet>…</velin-sheet>