Duskmoon UI v10.0.11
Theme
Bottom Sheet dm_bottom_sheet
## Overview Bottom sheet component wrapping the `el-dm-bottom-sheet` custom element. Renders a sliding panel from the bottom of the screen, commonly used for mobile-style action sheets, menus, or expandable content. ## Usage ```elixir <.dm_bottom_sheet id="my-sheet" modal> <:header>Sheet Title</:header> <p>Content here.</p> </.dm_bottom_sheet> ``` Open/close via JavaScript: ```javascript document.getElementById('my-sheet').show(); document.getElementById('my-sheet').hide(); ```

Basic Bottom Sheet

Open Basic Sheet
Basic Sheet

This is a basic bottom sheet with a header.

Swipe down or click outside to close.

Modal Bottom Sheet

Open Modal Sheet
Modal Sheet

This sheet has a backdrop overlay and traps keyboard focus.

Click the backdrop or press Escape to close.

Persistent Sheet

Open Persistent Sheet Close Persistent Sheet
Persistent Sheet

This sheet cannot be dismissed by clicking outside or swiping.

Use the close button above to dismiss.

Snap Points

Open Sheet with Snap Points
Snap Points: 25%, 50%, 100%

Drag the handle to snap between 25%, 50%, and 100% heights.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse.

Excepteur sint occaecat cupidatat non proident.