Bottom Sheet

Bottom Sheet Title

This is the content of the bottom sheet.

<.dm_bottom_sheet id="bottom-sheet-single-default">
  <:header>Bottom Sheet Title</:header>
  <p>This is the content of the bottom sheet.</p>
</.dm_bottom_sheet>
Open Sheet

This sheet is open by default with modal backdrop.

<.dm_bottom_sheet id="bottom-sheet-single-open" open modal>
  <:header>Open Sheet</:header>
  <p>This sheet is open by default with modal backdrop.</p>
</.dm_bottom_sheet>
Persistent Sheet

This sheet cannot be dismissed by clicking outside.

<.dm_bottom_sheet id="bottom-sheet-single-persistent" open persistent>
  <:header>Persistent Sheet</:header>
  <p>This sheet cannot be dismissed by clicking outside.</p>
</.dm_bottom_sheet>
Snap Points

Drag to snap at 25%, 50%, or 100% height.

<.dm_bottom_sheet id="bottom-sheet-single-snap-points" open snap_points="25,50,100">
  <:header>Snap Points</:header>
  <p>Drag to snap at 25%, 50%, or 100% height.</p>
</.dm_bottom_sheet>
Accessible Sheet

Inspect element to see aria-label on the sheet container.

<.dm_bottom_sheet id="bottom-sheet-single-with-label" label="Action selection sheet" open>
  <:header>Accessible Sheet</:header>
  <p>Inspect element to see aria-label on the sheet container.</p>
</.dm_bottom_sheet>