Slide-up bottom sheet panel controlled via JS.open_bottom_sheet/1 and JS.close_bottom_sheet/1 helper functions.

Examples

<.bottom_sheet id="settings-sheet">
  <:header>Settings</:header>
  <p>Sheet content here</p>
  <:footer>
    <button phx-click={close_bottom_sheet("settings-sheet")}>Close</button>
  </:footer>
</.bottom_sheet>

<.bottom_sheet_trigger for="settings-sheet">
  <button>Open Sheet</button>
</.bottom_sheet_trigger>

Attributes

• id (:string) (required)
• modal (:boolean) - Defaults to true.
• class (:string) - Defaults to nil.

Slots

• inner_block (required)
• header
• footer

Click wrapper that opens the target bottom sheet.

Examples

<.bottom_sheet_trigger for="settings-sheet">
  <button>Open Settings</button>
</.bottom_sheet_trigger>

Attributes

• for (:string) (required)
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Returns a JS command to close the bottom sheet with the given id.

Absolute positioned gradient overlay with configurable direction and colors.

Examples

<div class="relative">
  <img src="/bg.jpg" />
  <.gradient_overlay direction="t" from_color="from-primary/80" to_color="to-transparent">
    <p class="text-white">Top gradient</p>
  </.gradient_overlay>
</div>

Attributes

• direction (:string) - Defaults to "b". Must be one of "t", "b", "l", "r", "tr", "tl", "br", or "bl".
• from_color (:string) - Defaults to "from-black/60".
• to_color (:string) - Defaults to "to-transparent".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Directional gradient scrim for image overlays. Place inside a relative parent.

Examples

<div class="relative">
  <img src="/photo.jpg" />
  <.image_scrim direction="bottom" intensity="lg">
    <h2 class="text-white">Caption</h2>
  </.image_scrim>
</div>

Attributes

• direction (:string) - Defaults to "bottom". Must be one of "top", "bottom", "left", "right", or "all".
• intensity (:string) - Defaults to "md". Must be one of "sm", "md", "lg", or "full".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Returns a JS command to open the bottom sheet with the given id.

Fixed-position full-screen scrim overlay.

Examples

<.scrim color="dark" opacity="md" />

<.scrim blur>
  <p class="text-white">Content on top of scrim</p>
</.scrim>

Attributes

• color (:string) - Defaults to "dark". Must be one of "dark", or "light".
• opacity (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• blur (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Radial vignette / spotlight overlay — dark edges, bright center.

Examples

<div class="relative">
  <.spotlight_overlay size="lg" position="center" />
</div>

Attributes

• size (:string) - Defaults to "md". Must be one of "sm", "md", "lg", or "xl".
• position (:string) - Defaults to "center". Must be one of "center", "top", or "bottom".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block