View Source SaladUI.Sheet (SaladUI v1.0.0-beta.1)

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>

Summary

Functions

The main sheet component that manages state and positioning.

The close button for the sheet.

The sheet content that appears when triggered.

Renders a sheet description within the header section.

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

Renders a sheet header section for title and description.

Renders a sheet title within the header section.

The trigger element that opens the sheet.

Functions

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 sheet open event.
  • :on-close - Handler for sheet close event.
  • :class - Additional CSS classes.

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)

The close button for the sheet.

Attributes

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

Slots

  • inner_block (required)

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".
  • Global attributes are accepted.

Slots

  • inner_block (required)
Link to this function

sheet_description(assigns)

View Source

Renders a sheet description within the header section.

Attributes

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

Slots

  • inner_block (required)

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

Attributes

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

Slots

  • inner_block (required)

Renders a sheet header section for title and description.

Attributes

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

Slots

  • inner_block (required)

Renders a sheet title within the header section.

Attributes

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

Slots

  • inner_block (required)

The trigger element that opens the sheet.

Attributes

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

Slots

  • inner_block (required)