Sheet Edit

Extends the Dialog component to display content that complements the main content of the screen.

Examples

Installation


  rails generate shadcn-ui sheet

Usage

<%= render_sheet direction: "right" do %>
  <%= sheet_trigger do %>
  <% end %>

  <%= sheet_content do %>
  <% end %>
<% end %>

The Sheet component introduces:

  • app/helpers/components/sheet_helper.rb
  • app/views/components/ui/_sheet.html.erb
  • app/javascript/controllers//ui/sheet_controller.js

The render_sheet method accepts a direction optional keyword for the direction for the sheet, left (default) or right. The render_sheet method also accepts a block where you call the sheet_trigger and pass it a block that will be the trigger for the sheet and a 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.

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