SaladUI.Sheet (SaladUI v1.0.0)

Implementation of Sheet component for SaladUI framework.

Sheets are like dialogs that appear from the edge of the screen. They can be configured to slide in from different sides of the viewport.

Examples:

<.sheet id="user-sheet">
  <.sheet_trigger>
    <.button variant="outline">Open Sheet</.button>
  </.sheet_trigger>
  <.sheet_content side="right">
    <.sheet_header>
      <.sheet_title>Edit profile</.sheet_title>
      <.sheet_description>
        Make changes to your profile here. Click save when you're done.
      </.sheet_description>
    </.sheet_header>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <.label for="name" class="text-right">Name</.label>
        <.input id="name" value="John Doe" class="col-span-3" />
      </div>
    </div>
    <.sheet_footer>
      <.button type="submit">Save changes</.button>
    </.sheet_footer>
  </.sheet_content>
</.sheet>

Component events

:on-open - Maps the open event. Fired when sheet enters open state.
:on-close - Maps the close event. Fired when sheet enters closed state.

Server commands

"open" - Opens the sheet.
"close" - Closes the sheet.

Summary

Functions

sheet(assigns)

The main sheet component that manages state and positioning.

sheet_close(assigns)

The close button for the sheet.

sheet_content(assigns)

The sheet content that appears when triggered.

sheet_description(assigns)

Renders a sheet description within the header section.

sheet_footer(assigns)

Renders a footer section for the sheet, typically containing actions.

sheet_header(assigns)

Renders a sheet header section for title and description.

sheet_title(assigns)

Renders a sheet title within the header section.

sheet_trigger(assigns)

The trigger element that opens the sheet.

Functions

sheet(assigns)

The main sheet component that manages state and positioning.

Options

:id - Required unique identifier for the sheet.
:open - Whether the sheet is initially open. Defaults to false.
:on-open - Handler for open event. Accepts a server event name or %Phoenix.LiveView.JS{}.
:on-close - Handler for close event. Accepts a server event name or %Phoenix.LiveView.JS{}.
:"close-on-outside-click" - Whether overlay/outside click closes the sheet. Defaults to true.
:class - Additional CSS classes.

Component events

:on-open - Fired when the sheet opens.
:on-close - Fired when the sheet closes.

Server commands

Use SaladUI.LiveView.send_command(socket, id, command) with:

"open" - Opens the sheet.
"close" - Closes the sheet.

Attributes

id (:string) (required) - Unique identifier for the sheet.
open (:boolean) - Whether the sheet is initially open. Defaults to false.
class (:string) - Defaults to nil.
close-on-outside-click (:boolean) - Defaults to true.
on-open (:any) - Handler for sheet open event. Defaults to nil.
on-close (:any) - Handler for sheet close event. Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

sheet_close(assigns)

The close button for the sheet.

Attributes

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

Slots

inner_block (required)

sheet_content(assigns)

The sheet content that appears when triggered.

Options

:side - The side from which the sheet appears (top, right, bottom, left). Defaults to "right".
:class - Additional CSS classes to customize dimensions and appearance.

Attributes

class (:string) - Defaults to nil.
side (:string) - The side from which the sheet appears. Defaults to "right". Must be one of "top", "right", "bottom", or "left".
Global attributes are accepted.

Slots

inner_block (required)

sheet_description(assigns)

Renders a sheet description within the header section.

Attributes

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

Slots

inner_block (required)

sheet_footer(assigns)

Renders a footer section for the sheet, typically containing actions.

Attributes

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

Slots

inner_block (required)

sheet_header(assigns)

Renders a sheet header section for title and description.

Attributes

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

Slots

inner_block (required)

sheet_title(assigns)

Renders a sheet title within the header section.

Attributes

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

Slots

inner_block (required)

sheet_trigger(assigns)

The trigger element that opens the sheet.

Attributes

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

Slots

inner_block (required)