Sheet Edit

<%= render_sheet direction: "right" do %>
  <%= sheet_trigger do %>
    <%= render_button("Open Sidebar", variant: :outline) %>
  <% end %>
  <%= sheet_content do %>
    <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl
              font-semibold tracking-tight transition-colors first:mt-0">
      The King's Plan
    </h2>
    <p class="leading-7 [&:not(:first-child)]:mt-6">
      The king thought long and hard, and finally came up with
      <a href="#" class="font-medium text-primary underline underline-offset-4">
        a brilliant plan
      </a>:
      he would tax the jokes in the kingdom.
    </p>
    <blockquote class="mt-6 border-l-2 pl-6 italic">
      "After all," he said, "everyone enjoys a good joke,
      so it's only fair that they should pay for the privilege."
    </blockquote>
  <% end %>
<% end %>

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.

<button
  type="button"
  data-state="closed"
  data-controller="ui--sheet"
  data-action="click->ui--sheet#toggleOutlet"
  data--ui-sheet-outlet="#sidebar_sheet">
    Open Mobile Menu
</button>


<%= render_sheet id: "sidebar_sheet", direction: "left" do %>
  <div class=" h-full">
  <%= sheet_content do %>
    <!-- Mobile Menu -->
  <% end %>
  </div>
<% end %>