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 tofalse
.: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 tofalse
.class
(:string
) - Defaults tonil
.close-on-outside-click
(:boolean
) - Defaults totrue
.on-open
(:any
) - Handler for sheet open event. Defaults tonil
.on-close
(:any
) - Handler for sheet close event. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The close button for the sheet.
Attributes
class
(:string
) - Defaults tonil
.- 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 tonil
.side
(:string
) - The side from which the sheet appears. Defaults to"right"
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet description within the header section.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet header section for title and description.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sheet title within the header section.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that opens the sheet.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)