Sheet Edit
Extends the Dialog component to display content that complements the main content of the screen.
Examples
<%= 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 %>
#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.