Sheet

Display content that complements the main content of the screen.

Requires JS

This component requires the sheet_controller.js stimulus controller.

Caveats

When using as_child: true, it sanitizes the output of the child element's children with Rails sanitize helper.

To allow more tags or attributes, edit Base#sanitize_as_child according to your preference.

Anatomy

Sheet do |s|
  s.trigger
  
  s.content do
    s.header do
      s.title
      s.description
    end

    s.footer do
      s.close
    end
  end
end

Name	Type	Default
`open:`	`boolean`	`false`
Controls the initial open state of the sheet. When true, the sheet will be visible on render.
`attributes`	`keyword arguments`

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges the trigger functionality with the child element instead of creating a wrapper div.
`attributes`	`keyword arguments`

Name	Type	Default
`side:`	`symbol`	`:right`
Options: `:top \| :left \| :right \| :bottom`
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges the close functionality with the child element instead of creating a wrapper div.
`attributes`	`keyword arguments`

Key	Description
Space	Opens/closes the sheet.
Enter	Opens/closes the sheet.
Tab	Moves focus to the next focusable element.
Shift+Tab	Moves focus to the previous focusable element.
Esc	Closes the sheet and moves focus to trigger.

On This Page