The Sheet component introduces:

<%= code("app/helpers/components/sheet_helper.rb") %>
<%= code("app/views/components/ui/_sheet.html.erb") %>
<%= code("app/javascript/controllers//ui/sheet_controller.js") %>

The <%= code("render_sheet") %> method accepts a <%= code("direction") %> optional keyword for the direction for the sheet, left (default) or right. The <%= code("render_sheet") %> method also accepts a block where you call the <%= code("sheet_trigger") %> and pass it a block that will be the trigger for the sheet and a <%= code("sheet_content") %> method that accepts a block for the content of a sheet.

If you have to define a sheet whose trigger cannot be within the same elements of the sheet content, you can interact with the sheet controller directly.

<% content_for :examples, flush: true do %> <% end %> <% content_for :code, flush: true do %>

<%= code_partial("sheet/mobile_menu", :erb) %>

<% end %> <%= render_example %> In the above example the "Open Mobile Menu" button is triggering the sheet whose element matches <%= code("#sidebar_sheet") %>. It does this by calling <%= code("click->ui--sheet#toggleOutlet") %>, the <%= code("toggleOutlet") %> method in the sheet controller. The #sidebar_sheet element can be anywhere.